10 minutes to understand CSS3 Grid

  css3, grid, grid-system, html, layout

Basic introduction

In the last article, we introducedcss3 flexboxToday, let’s talk about another powerful function of css3: Grid.
The front-end students of Grid should be familiar with it, which translates into “grid” in Chinese. Those who have used bootstrap, semantic ui and ant design must all know grid layout. In the past, Grid Layout in css framework was generally realized by float and percentage width. This realization has several disadvantages:

  1. Html is not concise enough;
  2. Floating needs to be cleared to avoid high collapse;
  3. The number of columns is fixed and cannot be defined flexibly. For example, bootstrap is 12 columns, semantic ui is 16 columns, antdesign is 24 columns.

Of course, grid can also be implemented with flex, but it is not much simpler than float, and flex is good at one-dimensional space layout, while it is not good at grid, which is a two-dimensional space. Now css3 has realized grid from the standard and standard level, greatly improving the programming experience!

Compatibility

image

usage

As a two-dimensional Grid system, Grid consists of several column and rows.

1. Column

(1) set column

Grid in CSS3 can be divided into any number of columns, and the width of each column can be set arbitrarily! Let’s look at a simple example:

html:

<div id="content">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
 <div>9</div>
 </div>

css:

body{
color: #fff;
text-align: center;
}
#content{
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
max-width: 960px;
margin: 0 auto;
}
#content div{
background: lightgrey;
padding: 30px;
}
#content div:nth-child(even){
background: skyblue;
}

Effect:
image

When we set updisplay: gridAndgrid-template-columns: 33.3% 33.3% 33.3%After#contentIs divided into three rows and three columns of grid, at this time#contentgo by the name ofgrid container, and#contentThe child elements of are calledgrid item.

We can also arbitrarily change the number and width of column, such as:

#content{
 grid-template-columns: 10% 20% 30% 40%;
 }

Effect:
image

(2) fr(fraction)

In css3, a new unit fr(fraction), which means “fraction” in Chinese, is introduced to replace the percentage, because the percentage (decimal) is inexhaustible, and the notation of multiple decimal places can be avoided by using fraction. For example, a grid with three columns of equal width can be expressed as:

grid-template-columns: 1fr 1fr 1fr;

(3) repeat

We can also use itrepeatMethod to simplify the writing of column or row. the repeat method accepts two parameters. the first parameter indicates the number of repetitions and the second parameter indicates the content of repetitions. Therefore, we can also express a grid with three equal-width columns as follows:

grid-template-columns: repeat(3, 1fr);

Repeat becomes very useful when we want to define a large number of columns, for example, we want to define a grid with 10 columns and the same width, which can be written asrepeat(10, 1fr)Instead of putting the1frRepeat writing 10 times.

2. Row

(1) set row

When we set column, row will be automatically generated due to the element wrapping, but we can still set the number and height of row.

css:

#content{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(4, 60px);
 max-width: 960px;
 }

Effect:
image

It can be seen that although the fourth row has no content, the row does exist and occupies that part of space.

(2) minmax

In the above example, we gave row a fixed height, which leads to a problem: if there are too many contents in a grid item, some contents cannot be displayed due to the fixed height, as shown in the following figure:

image

To solve this problem, css providesminmaxFunction, so that we can set the minimum height and maximum height of row. When the maximum height is taken as auto, the height of row can be adaptive:

css:

grid-auto-rows: minmax(60px, auto);
//or
grid-template-rows: repeat(3, minmax(60px, auto));

Effect:
image

(3) grid gap

If we want to add spaces between rows and columns, there are also ready-made methods:
css:

grid-gap:{
 10px;
 }

Effect:
image

3. Grid Line

In all the above examples, each grid item in the grid is arranged in the default order. What if we want to rearrange and change the location or size of grid item? For this reason, the concept of grid lines is introduced. the so-called grid lines is the dividing line after dividing grid into several equal parts. in the following figure, the lines with horizontal and vertical serial numbers 1 to 8 are grid lines:

<img src=”http://lc-jOYHMCEn.cn-n1.lcfi …; alt=”drawing” width=”500″/>

By defining grid line at the beginning and end of grid item, we can control the position and coverage area of grid item. A simple example:

html:

<div id="content">
 <div class="one">1</div>
 </div>

css:

#content {
display: grid;
grid-template-columns: repeat(8, 100px);
grid-template-rows: repeat(8, 100px);
grid-gap: 10px;
}

.one {
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 6;
}

Effect:
image

By settinggrid-column-start/end grid-row-start/endIt is equivalent to setting the start and end coordinates for grid item, and the css above can also be abbreviated as:

.one {
grid-column: 3 / 6;
grid-row: 3 / 6;
}
//or
.one {
grid-area: 3 / 3 / 6 / 6;
}

If the starting grid line of grid item is the default, we can only set its span:

.one{
 grid-column: span 3;
 grid-row: span 3;
 }

4. Grid Area Template

In addition to layout via grid lines, css3 provides a much better layout method: grid area template. Instead of explaining what grid area template is in language, look directly at the code:

html:

<div id="content">
<header>Header</header>
<main>Main</main>
<section>Section</section>
<aside>Aside</aside>
<nav>Nav</nav>
<footer>Footer</footer>
</div>

css:

body {
color: #fff;
text-align: center;
}

#content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
max-width: 960px;
margin: 0 auto;
grid-gap: 10px;
grid-template-areas:
"header header header header"
"aside . main main"
"nav . main main"
"section section section section"
"section section section section"
"footer footer footer footer";
}

#content>* {
background: #3bbced;
padding: 30px;
}

header { grid-area: header;  }
main   { grid-area: main;  }
section{ grid-area: section;  }
aside  { grid-area: aside;  }
nav    { grid-area: nav;  }
footer { grid-area: footer;  }

Effect:
image

Do you understand? The focus is on grid container’sgrid-template-areasProperty. We set a grid area for each grid item, and then set a grid area template (grid-template-areas) in the grid container. each string in the template represents a row, and each area name represents a column. the geometric layout is completely simulated in words, while blank grid item is used.To express. Of course, when you use grid area, you should pay attention to strict grammar, like"header main header main"This style of writing css cannot be parsed, and the structure simulated by the area name must be a whole in two-dimensional space, because each grid item is also indivisible.

The advantages of using grid area template are also obvious when implementing responsive layout. we only need to make different grid area template for different screen sizes.

5. Justify and Align

Similar to flex, grid can also set justify and align to adjust the horizontal and vertical alignment of grid item. It also supports setting grid container or single grid item.

Settings for grid container

html:

<div id="content">
<div class="one">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

css:

#content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(2, minmax(120px, auto));
 grid-gap: 10px;
 max-width: 960px;
 align-items: start;
 justify-items: end;
 }

Effect:
image

Note: flex usesjustify-contentAnd inside grid isjustify-itemsThe value in flex isflex-start/flex-endAnd inside the grid isstart/end. The default values for justify and align arestretch.

Settings for grid item

css:

.one{
align-self: start;
justify-self: end;
}

Effect:
image

Practice

Having mastered the above knowledge, we can quickly make various layout effects with CSS3 Grid, and attach a few simple codepen examples:

  1. 12-column grid layout
  2. Petal layout
  3. Responsive layout