The basic concept

The explanation on MDN goes like this

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

In addition, the following paragraph is taken from A Complete Guide to Grid, which gives A clearer definition of CSS Grid

CSS Grid Layout (aka “Grid”), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces.

To sum up:

  • CSS Grid is a two-dimensional layout system
  • CSS Grid is better than traditional layout in overall layout of pages
  • CSS Grid is not only used in isolation, but can still be used togetherFlexboxAnd traditional positioning layouts

compatibility

From the compatibility analysis of CSS Grid in Can I Use.

As you can see from the figure, the overall compatibility rate of the browser is 84.16%, and all of them are prefixed.

The basic concept

A grid is a set of intersecting horizontal and vertical lines that define the columns and rows of the grid. We can place grid elements at locations associated with these rows and columns.

Grid Container

Apply display: grid to an element; Or display: inline – grid; A grid container is created, and the immediate children below it all become grid elements, for example:

<style>
.wrapper {
  display: grid;
}
</style>

<div class="wrapper">
  <div class="custom">One</div>
  <div class="custom">Two
    <p>I have some more content in.</p>
    <p>This makes me taller than 100 pixels.</p>    
  </div>
  <div class="custom">Three</div>
  <div class="custom">Four</div>
  <div class="custom">Five</div>
</div>
Copy the code

From the basic performance of the web page, there is no difference with the usual layout, Mac OSX [Alt + Command + I], Windows [F11] open the web inspector to see the grid layout.

Grid Tracks

It’s still a bit convoluted in its literal translation, but I’ll rephrase it and you’ll probably get the idea. You can just think of tracks as rows and columns in a table.

Define the number of rows and columns in a grid. Use grid-template-rows and grid-template-columns respectively to determine how many rows and columns the table will have. Such as:

.container {
  display: grid;
  grid-template-rows: 100px 50px 100px;
  grid-template-columns: 100px 100px 100px;
}
Copy the code

The code above writes out a 3 x 3 grid

The number of meshes can be seen in the figure, and the child elements are automatically filled based on the number of meshes. If you don’t know how many columns to partition, you can use just grid-template-columns to determine the number of columns. The number of columns is automatically calculated based on how many sub-items there are, as in the following example:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
Copy the code

Five elements divided into three columns should have two rows.

fr

If you want to evenly divide the width of the container, you can use the newly introduced unit FR, which represents an equal portion of the available space in the grid container. Such as:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
Copy the code

repeat()

We can use the repeat() function to mark portions of the track that are reused, for example, the style above could be written as:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
Copy the code

Height of each row

To determine the height of each row, use grid-auto-rows: 100px; To make sure each line is only 100px

minmax()

If you want the height of each line to be filled automatically with the content, you can use minmax() to determine the minimum and maximum values, for example:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
Copy the code

The above style specifies a grid layout with three columns, each row at least 100px high.

What’s the Grid Line?

Grid lines are used to construct the entire grid, both horizontal and vertical

When a grid is built, the grid lines are identified by default, as shown below:

Identification of the line can be normal can also be a reverse, such as the first line of the line is [1 | – 4], so what’s the use of lines? A line identifier is used to determine the Area to be occupied by a child element, also known as a Grid Area, as in the following code:

.one {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}
Copy the code

To the line named

By default, lines are identified by numbers. Of course, lines can be named as follows:

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
Copy the code

As you can see, the first line in the first column is named first, so we can rewrite it slightly:

.one {
  grid-column-start: first;
  grid-column-end: col4-start;
  grid-row-start: 1;
  grid-row-end: 3;
}
Copy the code

Naming lines when defining a grid is a simple introduction to more Naming lines

Grid Cell

It can be simply understood as a cell in a table

Grid Area

An area can be specified by specifying the start row and start column of an item. Note that the area must be a regular holding, not an L-shaped shape

Determine an area by row and column identifiers, for example:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
Copy the code

The above code delimits a region with two rows and two columns, which can be abbreviated as:

.one {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  
  /* This corresponds to */
  grid-column: [grid-column-start] / [grid-column-end];
  grid-row: [grid-row-start] / [grid-row-end];
}
Copy the code

Or grid-area,

.one { 
  grid-area: 1 / 1 / 3 / 3;
  
  /* This corresponds to */
  grid-area: [grid-row-start] / [grid-column-start] / [grid-row-end] / [grid-column-end];
}
Copy the code

You can also pre-partition areas with grid-template-areas, for example:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas: 
   "header header header"
   "siderbar main main"
   "footer footer footer"
}
Copy the code

The first behavior is “header”, the second behavior is “siderbar”, the right behavior is “main”, and the third behavior is “footer”. The remaining work is to specify the corresponding area of the child element.

.header {
  grid-area: header;
}
.siderbar {
  grid-area: siderbar;    
}
.main {
  grid-area: main;    
}
.footer {
  grid-area: footer;
}
Copy the code

The corresponding webpage file is:

<div class="container">
  <div class="custom header">header</div>
  <div class="custom siderbar">siderbar</div>
  <div class="custom main">main</div>
  <div class="custom footer">footer</div>
</div>
Copy the code

The final effect is:

Grid Gutters

Row spacing and column spacing are similar to colSPAN and Rowspan in table. Examples are as follows:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
  
  /* Grid-gap is equivalent to: */
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
Copy the code

From the previous example, I also set the spacing at 10px, as you can see from the image.

Grid z-index

Similar to position: absolute; At the level after absolute positioning, items rendered later will overwrite the previous ones, so items Two in the following example will overwrite One

.z-index-1 {
  grid-column: 1 / 3;
  grid-row: 1;
  background-color: aliceblue;
}
.z-index-2 {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background-color: antiquewhite;
}
Copy the code

Z-index: 2; And you’ll see that item1 is overwritten on top of Item2

<div class="custom z-index-1" style="z-index: 2;">One</div>
<div class="custom z-index-2" style="z-index: 1;">Two</div>
Copy the code

Alignment in grid layout

If you are familiar with Flex, you will know the layout in Flex, as well as the corresponding layout in Grid

Two axes of a grid layout

When working with grid layout you have two axes available to align things against — the block axis and the inline axis. The block axis is the axis upon which blocks are laid out in block layout. If you have two paragraphs on your page they display one below the other, so it is this direction we describe as the block axis.

  • Column axis in block direction

  • The line axis of the text direction

The above text and images are taken from MDN

Align column items

Align column items have two main CSS declarations: align-items and align-self. Align-items are used to set all items, and align-self can be customized separately. These two declarations take the following attribute values:

  • auto
  • normal
  • start
  • end
  • center
  • stretch
  • baseline
  • first baseline
  • last baseline

Here we use a chestnut to illustrate them as follows (chestnut from MDN) :

<style>
.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas: 
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
}
.item1 {
  grid-area: a;
  background-color: aqua;
}
.item2 {
  grid-area: b;
  background-color: aqua;
}
.item3 {
  grid-area: c;
  background-color: aqua;
}
.item4 {
  grid-area: d;
  background-color: aqua;
}
</style>

<div class="wrapper">
  <div class="custom item1">Item 1</div>
  <div class="custom item2">Item 2</div>
  <div class="custom item3">Item 3</div>
  <div class="custom item4">Item 4</div>
</div>
Copy the code

A grid of 8 x 4 columns is defined, which is divided into four uniform areas and filled with item[1,2,3,4] respectively. The default alignment is stretch

Alignment can be controlled by several Selects-one for the whole and one for individual items

Column alignment relative to the container

Use the align-content attribute declaration to determine the layout of the entire grid’s column orientation in the container. The optional values are as follows:

  • normal
  • start
  • end
  • center
  • stretch
  • space-around
  • space-between
  • space-evenly
  • baseline
  • first baseline
  • last baseline

As you can see in the figure, when align-Content: end is selected, the entire grid is aligned below the container.

See MDN CSS_Grid_Layout for more information

Relationships between Grid layouts and other layouts

The Grid and Flex

The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension – either a row or a column. Grid was designed for two-dimensional layout – rows, and columns at the same time.

The biggest difference between a Grid layout and a Flex layout is that a Grid layout is a two-dimensional layout for rows and columns, while a Flex layout is a one-dimensional layout for rows and columns.

Tips: These two layouts do not conflict and can be used together. You can use Grid for the overall layout, and Flex for the details

Here’s a look at the differences between the two layouts (chestnut source MDN) :

Write an auto-wrap adapted layout

  • Flex way
<style>
  .flex-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .flex-wrapper > div {
    flex: 1 1 200px;
  }
</style>

<div class="flex-wrapper">
  <div>One</div> 
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
Copy the code
  • The Grid way
<style>
  .grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
</style>
Copy the code

Use the flex – wrap: wrap; To limit wrapping if there is not enough of a line. Use auto-fill to determine how many columns there will be based on the container width, and use the minmax() function to determine a minimum of 200px and a maximum container width to fit.

If there is a lot of space left on the screen, the Flex layout will split into 5 columns, while the Grid layout will always have 3 columns, and the remaining two items will be the same length. If the screen width is less than 200, the Flex layout will elastic to 1 column, but if the Grid layout is not auto-fill, Will always be the number of columns set.

Another difference between grid layout and Flex layout is that the Grid layout takes precedence over the layout in initial allocation, specifying the maximum number of items on the screen that fit the criteria (in this case, a minimum of 200px and a maximum of 1FR), and populating them accordingly.

Grid and absolute positioning

.positioned {
  grid-template-columns: repeat(4, 1 fr);grid-auto-rows: 200px;
  grid-gap: 20px;
  position: relative;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: absolute;
  top: 40px;
  left: 40px;
}
Copy the code

If the parent container has positioning identifiers relative Or absolute, then the following child items are positioned according to their original position. If the parent container does not have positioning identifiers, position: absolute is applied. Will be removed from the GIRD layout and laid out in the traditional CSS style.

Remark:

  • Some of the pictures and cases in this article are from A Complete Guide to Grid and MDN
  • This article code repository: github.com/Rynxiao/css…
  • Some examples of this article: rynxiao.com/css-grid-tu…

Refer to the connection

  • MDN Css Grid Layout
  • A Complete Guid to Grid