CSS Grid is a powerful 2D web layout tool suitable for handling complex page structures. 1. To define the Grid container, you need to set display: grid; 2. Use grid-template-columns and grid-template-rows to set the column and row size; 3. Position sub-items through grid-column and grid-row or span keywords; 4. Use grid-template-areas to name areas to simplify complex layouts; 5. Use gap attributes to control spacing; 6. Automatically add new rows through grid-auto-rows; 7. Use media queries to achieve responsive adjustments, mastering these key points can effectively build modern web layouts.

CSS Grid is a very powerful tool in modern web layouts, which gives developers more flexibility to control two-dimensional layouts (rows and columns). If you are still using floating or flexbox to make complex page structures, it's really time to try Grid. It is not a replacement for Flexbox, but is more suitable for handling multi-dimensional layout scenarios.

Here are some questions and practical suggestions that you may be concerned about to help you get started with CSS Grid quickly.

How to define a Grid container

To use Grid, the first step is to turn an element into a "Grid container". Just add display: grid; to this element.

 .container {
  display: grid;
}

Once set to the Grid container, all its direct child elements will automatically become Grid items, and you can start defining their location, size, etc.

A common practice is to set the size of columns and rows first, such as:

 .container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-template-rows: auto 100px;
}

The above code means: the first column has a fixed width of 200px, the second column has a proportion of 1, and the third column has a proportion of 2. There are two rows in total, the first row has a height adaptive content, and the second row has a fixed 100px.

How to locate Grid children

One of the big advantages of Grid is that it can accurately control the position of each child. You can specify which lines they span through grid-column and grid-row .

For example:

 .item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

This means that .item1 starts from the first vertical line, spans to the third line (that is, occupying two columns), and is displayed on line 1.

You can also use span abbreviation method:

 .item1 {
  grid-column: 1 / span 2;
}

If you write this way, no matter how many columns there are at the end, .item1 will occupy two column widths.

Simplify layout with named areas

For more complex layouts, such as the header, sidebar, main content area, and bottom area, you can use grid-template-areas to name the area and then reference it in the child item.

Example:

 .container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

The advantage of this method is that it is clear logic, which is especially suitable for switching layouts when doing responsive design.

FAQs and tips

• How to add spacing?
  You can use gap attribute to set the spacing between rows and columns, such as:

   .container {
    gap: 20px 30px; /* Row spacing 20px, column spacing 30px */
  }

• What should I do if I add a new line automatically?
  If you do not want to manually define each row, you can set the default row height with grid-auto-rows :

   .container {
    grid-auto-rows: minmax(100px, auto);
  }

• How to adjust responsively?
  The easiest way is to cooperate with media queries to change the value of grid-template-columns to achieve different column counts or widths under different screen sizes.

---

Basically, that’s all. By mastering these key points, you can make a very complex web page layout. Grid is not difficult, but it does require understanding some new concepts and attributes. It may feel a little confused at first, but you can get started quickly with just a few trials.

The above is the detailed content of CSS Grid layout tutorial explained. For more information, please follow other related articles on the PHP Chinese website!