The layout of CSS Grid is simple and efficient. The first step is to set the container as a grid container, which is implemented through display: grid; The column width and row height can then be defined, such as grid-template-columns and grid-template-rows. 1. Use fr units to flexibly allocate space, such as 1fr or 2fr. 2. The repeat() function simplifies repeated values, such as repeat(3, 1fr) to create third-class columns. 3. The named area defines the structure through grid-template-areas, and cooperates with the grid-area attribute of the child element. 4. Use gap or row-gap/column-gap to set the spacing to not affect the edge distance. Master these core concepts and make the layout easier.

Using CSS Grid to make layouts is actually much simpler than you think, especially now that mainstream browsers support it. It doesn't struggle with float and inline-block as before. Grid is designed specifically for two-dimensional layouts, with both rows and columns being controlled, and it's easier to be responsive.

Setting up containers is the first step

If you want to use Grid, you must first set an element as the grid container:

 .container {
  display: grid;
}

As long as this sentence is added, its direct child elements will automatically become grid items. At this time, the column width and row height have not been specified, and the column width will be arranged in a row by default.

You can add dot styles to define column width and row height, for example:

• grid-template-columns : defines the width of each column
• grid-template-rows : defines the height of each row

For example:

 .container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
}

The above writing method is three columns: the first column is fixed 200px, and the latter two columns distribute the remaining space evenly.

Flexible allocation of space using fr units

fr is a unit unique to Grid, representing "a portion of available space". For example, if you want two columns to divide the space bipartitely, you can write it like this:

 grid-template-columns: 1fr 1fr;

If you want one to account for 2/3 and the other to account for 1/3:

 grid-template-columns: 2fr 1fr;

This writing method is particularly useful when doing responsive forms. You don’t need to care about the total width, the browser will automatically calculate it.

Another commonly used function is repeat() , which can avoid repeated writing of the same value:

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

This means creating three monospace columns.

Use named areas to make the structure clearer

If you want to create a basic structure of a web page, such as header, sidebar, main, footer, etc., you can use the method of naming the region:

 .container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

Then add the corresponding name for each child element:

 .header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

This method is particularly suitable for the overall layout of the page, with clear logic and convenient modification.

Don't forget to adjust the row spacing and column spacing

By default, there are no gaps between grids. If you want to set the spacing, you can use these two properties:

• gap : set the interval between rows and columns at the same time
• row-gap / column-gap : set rows or columns respectively

For example:

 .container {
  gap: 20px;
}

Or write separately:

 .container {
  row-gap: 10px;
  column-gap: 20px;
}

Note: The gap will not affect the distance from the edge of the container to the first/last grid. If you need extra margins, use padding or margin .

Basically that's it. There are not many core concepts in CSS Grid, but they are very powerful when combined. At first, it may feel a bit complicated, and you can find out how easy it is by trying it a few more times. It is not complicated, but it is easy to ignore details, such as forgetting to set containers, confusing fr and px, or not handling the spacing well - pay attention to these small places and the layout will be smooth.

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