1. An overview

Grid is one of the most powerful layouts in CSS in my opinion. In general, it divides a web page into sections that can be arbitrarily combined to create a layout. (These functions were previously encapsulated in some CSS frameworks, and CSS now supports them.)

The Grid has some similarities to Flex (I used Flex a lot in my previous development). , but Flex is more of a linear layout, depending on a variety of horizontal and vertical axis configurations. A grid, on the other hand, is a two-dimensional layout that uses rows and columns to divide up different two-dimensional regions, and operates on everything (yes, almost everything) in those two-dimensional regions to achieve different layouts.

As you can see from the two figures, Grid is more suitable for complex layouts with multiple rows and columns and varying width and height. In terms of layout functions, Grid is far more powerful than Flex.

2. Basic concepts

Summarize some basic concepts of grid layout, on the one hand, to comb their own knowledge, on the one hand, but also facilitate the readability of the document.

2.1 Container

This is also the legacy of CSS layout. In simple terms, it is the element that applies display:grid, and it should be the direct parent of all items.

HTML code:

<div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"><p>No<p></div>
</div>
Copy the code

The CSS code:

.container{
    display:grid
}
Copy the code

The outermost div is the container for the entire Grid layout

2.2 Item

For example, Item1, Item2, and Item3 are all direct children of a container, so they are all items belonging to a Container.

Note that

No

wrapped in Item3 is not an item. It is not a direct child of the container

2.3 Line

I will use pictures to visually show the concept from the line down, and how to achieve I believe you will be able to understand the nature after reading the detailed explanation of the attributes

The interlaced lines in the figure are lines (including the dotted line on the outer layer), so if a container has four columns, it means it has five columns.

2.4 Path (Track)

A path is the area covered by two adjacent lines

Blue Track

2.5 Cell

A cell refers to an area separated by two adjacent rows and two adjacent columns.

2.6 Area (Area)

An area is an area divided by two arbitrarily different lines and two arbitrarily different lines. It is composed of several cells

Red main

2.7 fr

The FR unit allows you to set the size of Grid tracks with the free space of the Grid container divided equally.

The remaining free space is calculated after removing all non-flexible grid items.Copy the code

In this example, subtract 100px from the total amount of available space and divide the values of the FR cells by 1:2:1:

   grid-template-columns: [row-one] 1fr [row-two] 2fr [row-three]1fr [row-four] 100px [row-five] ;
Copy the code

3. Container properties

3.1 Attribute List

  • display
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
  • grid-template
  • grid-column-gap
  • grid-row-gap
  • grid-gap
  • justify-items
  • align-items
  • place-items
  • justify-content
  • align-content
  • place-content
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
  • grid

display

Values: display: the grid | inline – grid

Without further ado about grid, inline-grid essentially turns the container element into an inline element

grid-template-columns / grid-template-rows

Values:

  • <track-size>: Can be length value, percentage, or available space in equal portions of the grid container (using FR units)
  • <line-name>: Give your line any name

HTML code:

    <body>
        <div class="container">
            <div class="item1 center"></div>
            <div class="item2 center"></div>
            <div class="item3 center"></div>
            <div class="item4 center"></div>
            <div class="item5 center"></div>
        </div>
    </body>
Copy the code

The CSS code:

.container {
    display: grid;
    grid-template-columns: [row-one] 100px [row-two] 100px [row-three]100px [row-four] 100px [row-five] ;
    grid-template-rows: 100px auto 100px 100px;
  }

.center{
    display: flex;
    justify-content: center;
    align-items: center;
}
Copy the code

You can specify the name of the grid line explicitly, just as you did for grid-template-columns in the code. You will also notice that items are sorted by default by row, left to right and top to bottom in the container. That’s what it looks like, but there’s a problem, what happened to item5 that should have been the first item in line 2?

Grid-template-rows: 100px auto 100px 100px; In the case of auto, it defaults to the desired height of the child element, but item5 does not have any child elements, so row2 “disappears”.

Try adding a text to Item5

. <div class="item5 center">text</div>
...

Copy the code

As shown, item5 appears in row2

grid-template-areas

The grid-area property specifies a grid area name to define a grid template.

Repeating the name of a grid area causes content to span those cells. A dot (.) Represents an empty cell. The syntax itself can be viewed as a visual structure of the grid.

Value:

  • <grid-area-name>: The name of the grid area specified by the grid-area of the grid item
  • . (dot) : represents an empty grid cell
  • None: The grid region is not defined

Directly on the code:

grid-template-areas: 
  "none header header sidebar"
  "main main simpleCell sidebar"
  "main main footer .";
  .item1 {
    grid-area: header;
    background-color: orange;
  }
  .item2 {
    grid-area: main;  
    background-color: red;
  }
  .item3 {
    grid-area: sidebar;
    background-color: blue;
    color: white;
    font-size: 30px;
  }
  .item4 {
    grid-area: footer;
    background: green;
  }
  .item5 {
    grid-area: simpleCell;
    background: #694545;
  }
Copy the code

Make it simple. Write a named square in grid-template-Areas, and then the item (item) corresponds with that name using the grid-Area attribute.

Tips: The named distribution in grid-template-Areas must be a rectangle

grid-column-gap/grid-row-gap

Specifies the size of a grid line. This is equivalent to setting the spacing between rows and columns

So without further ado about the code

grid-column-gap:50px;
grid-row-gap:25px;
Copy the code

The distance of the line has been separated! Note that if your area contains multiple cells, the width of the area will take into account the width of the line.

justify-items

Context-items sets the alignment of items in their respective areas on the line axis

Desirable values:

  • Start: Aligns grid items to the left starting edge of their cells (left aligned)
  • End: Aligns the grid entry to the right end edge of its cell (right aligned)
  • Center: Aligns grid items to the horizontal middle of their cells (horizontally centered alignment)
  • Stretch: Fills the width of the cell (default)

Go directly to the code to experience:

justify-items: start;
Copy the code

justify-items: center;
Copy the code

justify-items: end;
Copy the code

It is important to note that header, main, and Siderbar occupy an area consisting of multiple cells, so their positions take the beginning, middle, and end of the area

align-items

Context-items sets the alignment of items in their respective areas on the column axis

Desirable values:

  • Start: Aligns grid items to the top start edge of their cells (top alignment)
  • End: Aligns the grid item to the bottom end edge of its cell (bottom alignment)
  • Center: Aligns grid items to the vertical middle of their cells (vertically centered alignment)
  • Stretch: The height to fill a cell (default)

The actual effect of this can be described in context-items, which you can try yourself.

place-items

Place-items is a combination of align-items and context-items

Desirable values:

  • <align-items> <justify-items>

The first value is set to align-items, the second value is set to context-items, and if only the first value is set this value will be assigned to both align-items and context-items

justify-content

Sometimes, if your items add up to be smaller than containers, and your items use fixed width units such as px, you may need to justify-content to keep your items in the desired position.

Desirable values:

  • Start: Align the grid to the starting left edge of the Grid Container (left aligned)
  • End: Align the grid to the right end edge of the grid container (right aligned)
  • Center: Align the grid to the middle of the grid container horizontally (horizontally centered alignment)
  • Stretch: Adjusts the width of grid items to allow the grid to fill the entire width of the grid container
  • Space-around: Place an even space between each grid item, with half of the space on the left and right ends
  • Space-between: A uniform space is placed between each grid item, with no space left or right
  • Space-instituted: Place a evenly spaced space between each grid item and a evenly spaced space at the left and right ends

Put the picture in sequence:

align-content

Column-axis version of justify-content. Assignment of what are exactly the same, recommend yourself to try a huh

place-content

Place-content is a combination of align-content and justify-content

Desirable values:

  • <align-content> <justify-content>

The first value is set to align-content, the second value is set to context-content, and if only the first value is set this value is assigned to both align-content and context-content

grid-auto-columns / grid-auto-rows

Specify the height/width of automatically generated tracks. When there are more items in the container than cells, or items are positioned outside of all current cells, the container automatically creates (implicit tracks) to fill the missing space.

Desirable values:

  • <track-size>: Can be a length value, a percentage, or the fraction of space available in an equal portion of a grid container (using FR units)

The code:

.container { width: 100%; display: grid; grid-template-columns: 100px 100px 100px 100px ; grid-template-rows: 100px 100px 100px 100px; grid-auto-columns:70px; grid-auto-rows: 70px; border: 1px solid black; grid-template-areas: "none header header sidebar" "main main simpleCell sidebar" "main main footer ."; }... .item6 { width: 100%; grid-column: 6; grid-row: 5; background: #694545; }Copy the code

As you can see, the Container originally consisted of a 4 × 4 row and column, but grid-column/grid-row was used to specify 5 rows and 6 columns in Item6. At this point, the Container creates an implicit track (dotted lines in the figure). Grid-auto-columns and grid-auto-rows are used to specify the column width and row height of an implicit track, respectively.

grid-auto-flow

If you have items that are not specified where to put them, then the Container will arrange them according to a certain rule. Grid-auto-flow can set this rule.

Desirable values:

  • Row: Populates each row in turn, adding new rows as needed (default)
  • Column: Fill each column in sequence and add new columns as required
  • Dense: Attempts to fill early gaps in the grid when smaller grid items appear later

The code:

Universal part —

      .item1 {
        width: 100%;
        grid-column: 1 / span 3;
        // grid-area: header;
        background-color: orange;
      }
      .item2 {
        // grid-area: main; 
        width: 100%;
        grid-column: 1 / span 2; 
        background-color: red;
      }
      .item3 {
        width: 110px;
        // grid-area: sidebar;
        background-color: blue;
        color: white;
        font-size: 30px;
      }
      .item4 {
        width: 100px;
        // grid-area: footer;
        background: green;
      }
      .item5 {
        width: 100px;
        // grid-area: simpleCell;
        background: #694545;
      }
      .item6 {
        width: 100%;
        background: #694545;
      }
Copy the code

grid-auto-flow: row;

grid-auto-flow: column;

grid-auto-flow: row dense;

grid-auto-flow: column dense;

  .item1 {
    width: 100%;
    grid-row: 1 / span 3;
    // grid-area: header;
    background-color: orange;
  }
  .item2 {
    // grid-area: main; 
    width: 100%;
    grid-row: 1 / span 2; 
    background-color: red;
  }
Copy the code

Item property

Tips: float, display: inline-block, display: table-cell, vertical-align, and column-* attributes are not valid for item

Grid-column-start/grid-column-end/grid-row-start/grid-row-end and grid-column/grid-row

The position of an item in the grid is determined by referring to specific lines.

Grid-column-start/grid-row-start is the grid line where the grid item starts.

Grid-column-end/grid-row-end is the grid line where the grid item ends.

Note that if these sub-attributes are used for layout, do not use grid-area for grid-template-areas in containers. The former is overwritten by the layout effect of the latter

In the code

.container { grid-template-columns: [col-1]100px [col-2] 100px [col-3]100px [col-4] 100px [col-5]; grid-template-rows: [row-1]100px [row-2]100px [row-3]100px [row-4]100px[row-5]; grid-auto-columns:70px; grid-auto-rows: 70px; . .item1 { grid-column-start: 1; grid-column-end: span col-4; grid-row-start: 2; grid-row-end: span 2; width: 100%; // grid-area: header; background-color: orange; z-index: 100; }}Copy the code

Item1 is the Heaher part of the figure. And you can see, in terms of columns, he starts at 1, which is col-1 on the far left, and ends at col4. In terms of rows, he starts at top down 2, row-2, and crosses 2 lines.

Span X stands for the x-th line from the beginning to the end of the line. You can also specify the location by the name of the line, such as row-1, col-2, if you have to name it.

Grid-column/grid-row is a shorthand for the above four attributes.

The above properties can also be written as

grid-column: 1 / span col-4;
grid-row: 2 / span 2;
Copy the code

grid-area

Desirable values:

  • <name>: Indicates the name specified in the Container
  • <row-start> / <column-start> / <row-end> / <column-end>: Number or line name

Actually, I’ve been using… It already looks very familiar.

/
/

/
is not recommended. Far better to specify

justify-self

The container attribute justify-item version, which has exactly the same value and effect

align-self

Align-items Item version of the container property. The value and effect are the same

place-self

Combination of justify-self and align-self

Desirable values:

  • Auto default
  • <align-self> <justify-self>If only one is written, it will be assigned to the second simultaneously