Understanding the Grid layout in one article

What is the Grid layout?

GridThat layout grid layout, is a new CSSlayout model, better at one page is divided into several main areas, as well as define the size of these regions, position, level and other relations. Claims to be the most powerful of the CSSlayout of the program, is currently the only CSStwo-dimensional layout. Use Gridlayout, we can easily achieve similar to the following layout, demonstration Address

Grid layout and flex layout

Talked about the layout, we will think of flexthe layout, and even suggested that as many as flexlayout, and it seems there is no need to know Gridthe layout. However, flexthe layout and Gridthe layout has a substantial difference, that is, flexthe layout is unidimensional, Gridthe layout is a two-dimensional layout . flexThe layout can only handle the layout of elements in one dimension at a time, one row or one column. GridThe layout is to divide the container into "rows" and "columns" to produce a grid. We can place the grid elements in positions related to these rows and columns to achieve our layout purpose.

GridLayout than the flexlayout of the strong!

Example of flex layout:

Grid layout example:

Some basic concepts of Grid

We use Grid to implement a small example to demonstrate some basic concepts of Grid and demonstrate the address

<div class="wrapper">
  <div class="one item">One</div>
  <div class="two item">Two</div>
  <div class="three item">Three</div>
  <div class="four item">Four</div>
  <div class="five item">Five</div>
  <div class="six item">Six</div>
</div>
复制代码

.wrapper {
  margin: 60px;
  
  display: grid;
  
  grid-template-columns: repeat(3, 200px);
  
  grid-gap: 20px;
  
  grid-template-rows: 100px 200px;
}
.one {
  background: #19CAAD;
}
.two { 
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}
复制代码

Container and project: We declare over the elements display：gridor display：inline-gridto create a mesh container. Once we do this, all immediate children of this element will become grid items. Such as the above .wrapperelements as a grid where the container will be immediate child element grid items.

Track grid: grid-template-columnsand grid-template-rowsattributes to define a grid of rows and columns. The horizontal areas inside the container are called rows, and the vertical areas are called columns. Figure above One, Two, Threethe composition of the Onerow , Fouris an

Grid unit: A grid unit is the smallest unit in a grid element. Conceptually, it is actually very similar to a cell in a table. Figure above One, Two, , Three... Fouris one of the grid units

Grid line: The line that divides the grid, called "grid line". It should be noted that when we define a grid, we define a grid track, not a grid line. Grid will create numbered grid lines for us to allow us to locate each grid element. The m column has m + 1 vertical grid lines, and the n row has n + 1 and horizontal grid lines. For example, in the example above, there are 4 vertical grid lines. Generally speaking, the numbers are sorted from left to right, top to bottom, 1, 2, and 3. Of course, you can also sort the numbers from right to left, bottom to top, in the order of -1, -2, -3...

Introduction to container properties

GridMany attributes and values related to the layout requires a lot of memory, it is recommended with democombined together, side knock understand the code side, and then use some free time remember it. I will introduce each attribute when to be a small demodemonstration, I suggest that you can modify their own look at the effect to enhance memory

GridLayout attributes can be divided into two categories, one is container attributes, and the other is item attributes. Let's first look at the container properties

display attribute

display property demo

Through a statement on the elements display：gridor display：inline-gridto create a mesh container. Declare display：gridthe vessel is a block element, provided display: inline-gridthe line element within the container element

.wrapper {
  display: grid;
}
复制代码

.wrapper-1 {
  display: inline-grid;
}
复制代码

grid-template-columns property and grid-template-rows property

Demonstration address of grid-template-columns and grid-template-rows properties

grid-template-columnsSetting the column width properties, grid-template-rowshigh property line, these two attributes Gridparticularly important in the layout, their values are diverse, but their arrangement is more similar, for the following grid-template-columnsto explain properties

Fixed column width and row height

.wrapper {
  display: grid;
  
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  
  grid-template-rows: 50px 50px;
}
复制代码

The above means that the fixed column width is 200px 100px 200px, and the row height is 50px 50px

repeat() function : can simplify repeated values. This function accepts two parameters, the first parameter is the number of repetitions, and the second parameter is the value to be repeated. For example, the row heights above are all the same, we can achieve this, the actual effect is exactly the same

.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  2行，而且行高都为 50px  */
  grid-template-rows: repeat(2, 50px);
}
复制代码

Auto-fill keyword : indicates automatic filling, so that as many cells as possible can be accommodated in a row (or a column). grid-template-columns: repeat(auto-fill, 200px)Indicates that the column width is 200 px, but the number of columns is not fixed. As long as the browser can accommodate it, you can place elements. The code and effect are shown in the following figure:

.wrapper-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

fr Keywords : The Gridlayout also introduces an additional length unit to help us create flexible grid tracks. frThe unit represents an equal part of the available space in the grid container. grid-template-columns: 200px 1fr 2frIndicates that the width of the first column is set to 200px, and the remaining width is divided into two parts, the widths are respectively 1/3 and 2/3 of the remaining width. The code and effect are shown in the figure below:

.wrapper-3 {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

minmax() function : We sometimes want to give the grid element a minimum and maximum size. The minmax()function generates a range of length, which means that the length can be applied to the grid project within this range. It accepts two parameters, minimum and maximum. grid-template-columns: 1fr 1fr minmax(300px, 2fr)Means that the third column width is at least 300px, but the maximum cannot be greater than twice the width of the first and second columns. The code and effect are as follows:

.wrapper-4 {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(300px, 2fr);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

Auto keyword : The length is determined by the browser. By autokeyword, we can easily achieve three or two-column layout. grid-template-columns: 100px auto 100pxIndicates that the first and third columns are 100px, and the length is determined by the browser. The code and effect are as follows:

.wrapper-5 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

grid-row-gap property, grid-column-gap property, and grid-gap property

Grid-row-gap attribute, grid-column-gap attribute and grid-gap attribute demonstration address

grid-row-gapAttributes and grid-column-gapattributes set the row spacing and column spacing respectively. grid-gapAttribute is a short form of both.

grid-row-gap: 10pxIndicates that the line spacing is 10px, and grid-column-gap: 20pxthat the column spacing is 20px. grid-gap: 10px 20pxThe effect achieved is the same

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-auto-rows: 50px;
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}
复制代码

The above two writing methods have the same effect.

grid-template-areas 属性

grid-area and grid-template-areas demo address

grid-template-areas Attributes are used to define areas, and an area is composed of one or more cells

General This property with mesh elements grid-areaused together, we are here to introduce together. grid-areaThe attribute specifies in which area the item is placed

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px  120px  120px;
  grid-template-areas:
    ". header  header"
    "sidebar content content";
  background-color: #fff;
  color: #444;
}
复制代码

The above code is divided into 6 represents cells which is worth noting that .symbol representing the empty cell, i.e. the cell is not used.

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}
复制代码

The above code shows a class .sidebar .content .headerelement is located on top grid-template-areasof the defined sidebar content headerarea

grid-auto-flow property

grid-auto-flow property demo address

grid-auto-flowAttributes control how the automatic layout algorithm works, precisely specifying how the elements that are automatically laid out in the grid are arranged. The default order is placed "the first row", i.e. to fill the first row, then into the second line begins, i.e. the sequence in FIG alphanumeric one, two, three.... The order by the grid-auto-flowproperty determines the default value is row.

.wrapper {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

Attentive students may have found a problem, that is, there is a gap between the fifth item and the sixth item (as shown in the figure below). This is because the length of the sixth block is greater than the length of the blank, and it was squeezed to the bottom. Caused by one line. In practical applications, we may want the following length to fill this blank with a suitable length. This time can be set grid-auto-flow: row denseto fill the form as much as possible. The code and effect are as follows:

.wrapper-2 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row dense;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

It can be set grid-auto-flow: column, indicating that the first column is followed by the row, the code and effect are shown in the following figure:

.wrapper-1 {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-flow: column;
  grid-gap: 5px;
  grid-template-rows:  50px 50px;
}
复制代码

justify-items attribute, align-items attribute, and place-items attribute

Justify-items attribute, align-items attribute demonstration address

justify-itemsThe property sets the horizontal position of the cell content (left, center, right), and the align-itemsproperty sets the vertical position of the cell (top, middle, bottom)

The following takes the justify-items attribute as an example to explain, the align-items attribute is the same, but the direction is vertical. They all have the following attributes:

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
复制代码

The code implementation and effects are as follows:

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-items: start;
}
.wrapper-1 {
  justify-items: end;
}
.wrapper-2 {
  justify-items: center;
}
.wrapper-3 {
  justify-items: stretch;
}
复制代码

start: align the starting edge of the cell

end: align the end edge of the cell

center: Center the inside of the cell

stretch: stretch to occupy the entire width of the cell (default value)

justify-content attribute, align-content attribute, and place-content attribute

Justify-content attribute, align-content attribute demonstration address

justify-contentThe attribute is the horizontal position of the entire content area in the container (left, center, right), and the align-contentattribute is the vertical position of the entire content area (top, middle, and bottom). They all have the following attribute values.

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
复制代码

In the following justify-contentproperty as an example to explain, align-contentattribute Similarly, only the direction is the vertical direction

start-align the starting border of the container
end-align the end border of the container
center-the center of the container

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3, .wrapper-4, .wrapper-5, .wrapper-6 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-content: start;
}
.wrapper-1 {
  justify-content: end;
}
.wrapper-2 {
  justify-content: center;
}
复制代码

space-around-The space on both sides of each item is equal. Therefore, the space between items is twice as large as the space between the items and the container border
space-between-the space between the item and the item is equal, there is no space between the item and the container border
space-evenly-the space between the item and the item is equal, and the space between the item and the container border is the same length
stretch-when the item size is not specified, the stretch occupies the entire grid container

.wrapper-3 {
  justify-content: space-around;
}
.wrapper-4 {
  justify-content: space-between;
}
.wrapper-5 {
  justify-content: space-evenly;
}
.wrapper-6 {
  justify-content: stretch;
}
复制代码

grid-auto-columns property and grid-auto-rows property

grid-auto-columns property and grid-auto-rows property demo address

Talking about grid-auto-columnsproperty and grid-auto-rowsprior property, take a look at the concept of implicit and display grid

Implicit and display the grid : the grid explicitly contained in your grid-template-columnsand grid-template-rowsrow and column attributes are defined. If you put something outside the grid definition, or need more grid tracks because of the amount of content, the grid will create rows and columns in the implicit grid

If extra grid (i.e. implicit grid mentioned above), then its column width and line height may grid-auto-columnsproperty and grid-auto-rowsproperty settings. And their wording grid-template-columnsand grid-template-rowsthe same. If you do not specify these two attributes, the browser will determine the column width and row height of the new grid completely based on the size of the cell content

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px;

  grid-template-rows: 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

grid-template-columnsAttributes and grid-template-rowsattribute only specifies two rows and two columns, but actually there are nine elements, it will have an implicit grid. By grid-auto-rowsbe specified implicitly 50px height of grid lines

Project attribute introduction

grid-column-start property, grid-column-end property, grid-row-start property and grid-row-end property

Demo address

You can specify the four borders where the grid item is located, and which grid line to locate respectively, so as to specify the position of the item

grid-column-start property: the vertical grid line where the left border is located
grid-column-end property: the vertical grid line where the right border is located
grid-row-start property: the horizontal grid line where the upper border is located
grid-row-end property: the horizontal grid line where the bottom border is located

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column-start: 1;
  grid-column-end: 2;
  background: #19CAAD;
}
.two { 
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  
  z-index: 1;
  background: #8CC7B5;
}
.three {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  background: #D1BA74;
}
.four {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #BEE7E9;
}
.five {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #E6CEAC;
}
.six {
  grid-column: 3;
  grid-row: 4;
  background: #ECAD9E;
}
复制代码

In the above code, the class .twogrid project is located, the vertical grid lines is from 2 to 4, horizontal grid lines is from 1-2. Among them, it .threeconflicts with (vertical grid lines are from 3 to 4, and horizontal grid lines are from 1 to 4). You can set z-indexto decide their hierarchy

grid-area property

grid-areaAttribute specifies the project in a region which, in the introduction above grid-template-areas, when there are mentioned, there is no longer a specific expansion, the use of specific reference may demonstrate Address:

grid-area and grid-template-areas property demo address

justify-self attribute, align-self attribute, and place-self attribute

justify-self attribute/ align-self attribute/ place-self attribute demo address

justify-selfProperty of the cell contents of the horizontal position (left, right), with justify-itemsthe use of the property exactly the same, but acts only on a single project

align-self The property sets the vertical position of the cell content (upper, middle and lower), which is exactly the same as the usage of the align-items property, and it only affects a single item

Both very similar, here take only justify-selfattribute presentation align-selfattribute Similarly, only acting in a vertical direction

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
复制代码

.item {
  justify-self: start;
}
.item-1 {
  justify-self: end;
}
.item-2 {
  justify-self: center;
}
.item-3 {
  justify-self: stretch;
}
复制代码

start: align the starting edge of the cell

end: align the end edge of the cell

center: Center the inside of the cell
stretch: stretch to occupy the entire width of the cell (default value)

Grid Actual Combat-Realizing Responsive Layout

After the above introduction, I believe everyone can see that Grid is very powerful. Some common CSS layouts, such as centered, two-column layout, three-column layout, etc., are easy to implement. Let's take a look at how Grid layout implements responsive layout

fr realizes equal division response

frThe equal division unit, which can divide the available space of the container into as many equal division spaces as desired. Using this feature, we can easily implement an equally divided response. grid-template-columns: 1fr 1fr 1frIndicates that the container is divided into three equal parts

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

repeat + auto-fit——fix the column width and change the number of columns

Aliquots layout is not the only Gridlayout only, like the flexlayout can be easily achieved, then look at more advanced responsive

The above example is always three-column, but we often want our grid to be able to fix the column width and change the number of columns according to the width of the container. This time, we can use the above-mentioned repeat()functions and auto-fitkeywords. grid-template-columns: repeat(auto-fit, 200px)Indicates that the fixed column width is 200px and the number is adaptive. As long as it can be accommodated, it will be arranged upwards. The code and effects are implemented as follows:

Demo address

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

repeat+auto-fit+minmax remove the blank on the right

In the effect seen above, there is usually a blank on the right side, which is what we don't want to see. It would be great if the width of the column can also be adaptive within a certain range. minmax()The function helps us do this. The grid-template-columns: repeat(auto-fit, 200px)change grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))indicates that the column width of at least 200px, if there is spare aliquot together. The code and effect are as follows:

Demo address

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

repeat+auto-fit+minmax-span-dense solve the vacancy problem

Everything seems to be going well, but one day UI, the length of each grid element may not be the same, which is simple, by spanexecuting the span to set the grid project keywords grid-column-start: span 3, indicating that the span of 3 Grid project. The specific code and effect are as follows:

.item-3 {
  grid-column-start: span 3;
}
复制代码

Demo address

No, why is there a blank space on the right side? There are some original length is too long, can not let go, this time to our densekey play. grid-auto-flow: row denseMeans to fill as much as possible, without leaving blanks, the code and effect are as follows:

.wrapper, .wrapper-1 {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

.wrapper-1 {
  grid-auto-flow: row dense;
}
复制代码

Grid layout compatibility

Finally, talk about Gridthe layout of compatibility issues, in caniuse , we can see the results as follows, overall compatibility also good, but not supported in IE 10 or less. Personal suggestion is not a problem to use in the company's internal system, but the TOC may not be suitable for now