Grid layout

  • [The first sentence of the article] This article has participated in the “Digitalstar Project”, won the creative gift package, challenge creative incentive money.

What is grid layout

Grid layout, as the name implies, is like a grid like a grid layout. In a container, we can cut into many rows and columns to form a grid, which can be ordered and used regularly to achieve our complex page layout.

A Grid layout is similar to a Flex layout in that it can specify the location of multiple items within a container. But there are also important differences.

Flex layout is an axis layout, which has a main axis and a side axis, and can only specify the position of the child elements in the container against the axis. It can be considered as a one-dimensional layout. A Grid layout divides the container into “rows” and “columns”, generates cells, and then specifies the cells “where the project resides”, which can be thought of as a two-dimensional layout. The Grid layout is far more powerful than the Flex layout.

Second, the use of grid layout

1. Grid Basic attributes

Grid containers and projects

First, we need to know that grid layout also has “containers” and “projects”. Or display: inline – grid; Indicates that the container is a grid container and that all direct descendants of the element will become grid elements.

Grid: Indicates that the container itself is a block-level element that occupies a single row.

Inline-grid: Indicates that the container itself is an inline element that can be on a row with other inline elements.

Container is a grid container, and item is a grid element. Grandson is not a grid element, so the parent can only affect the child.

    <div class="container">
        <div class="item">
            <div class="grandson"></div>
        </div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
Copy the code

The grid line is the same

The dividing line separating the grid structure. They can be vertical (‘ column grid lines’) or horizontal (‘ row network lines’)

A grid cell is a grid cell

A grid cell is the space between four grid lines. So it’s the smallest unit, like a cell in a table.

A grid track

Grid-template-columns and grid-template-rows attributes define rows and columns in the grid. A grid track is the space between any two lines in a grid.

It’s like rows or columns in a table. It is divided into grid column and grid row in the grid. Each grid track can be set to a size that can be used to control width or height.

Grid area

The total space enclosed by multiple grid lines. A grid region can contain any number of grid cells.

2. Properties on the parent container

First must be: display: the grid | inline – grid | subgrid. Specify a container with a grid layout.

  • Grid – Generates a block-level grid
  • Inline-grid – Generates an inline-level grid
  • Subgrid – If your Grid Container is itself a Grid Item (i.e., nested grid), you can use this property to indicate the size of its rows/columns that you want to get from its parent, rather than specifying its own size.

1. Grid track width and height

The grid-template-columns attribute defines the column width of each column, and the grid-template-rows attribute defines the row height of each row. Using an array in front of the size defines the name of the grid line, which can have many names. Can write or not write, depending on demand.

 .container {
        width: 200px;
        height: 200px;
        display: grid;
     /* Defines three columns each 50px */
grid-template-columns: [first] 50px [line2]50px [line3]50px;
      /* Defines three rows each 50px */
        grid-template-rows: [first]50px [rowline2 line2]50px [line3]50px [end];
    }
Copy the code

Effect:

In addition to absolute units, we can also use FR units, one fr unit representing one equal portion of the available space in the grid container. You can also use percentages, or if you define too many rows, too many columns, you can use the repeat() function. You can also mix them. For example, the following

grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3.33.33%); Fr grid-template-columns: repeat(3.50px[col-start]); // Take the grid line name grid-template-columns: repeat(2.100px 20px 80px); // Repeat some pattern grid-template-columns: 30% 50px auto;
Copy the code

Note: When mixing units, as shown below, subtract 50px from the available width and divide the resulting space equally.

grid-template-columns: 1fr 50px 1fr 1fr;
Copy the code

2. Grid spacing

Grid-row-gap sets row spacing (row spacing), grid-column-gap sets column spacing (column spacing), grid-gap is a combination of grid-column-gap and grid-row-gap. grid-gap:


    .container {
        width: 200px;
        height: 200px;
        display: grid;
        grid-template-columns: [first] 50px [line2]50px [line3]50px;
        grid-template-rows: [first]50px [rowline2 line2]50px [line3]50px [end];
        grid-row-gap:5px;
        grid-column-gap:5px;
      /* grid-gap: 5px 5px; Combined form */
    }
Copy the code

Effect:

3. Grid areas

Define a grid template by referring to the name of the grid region specified by the grid-area-name attribute. Repeating the name of a grid area causes content to expand to those cells. A dot indicates an empty cell. The syntax itself provides a visualization of the grid structure.

Define a 2 by 3 grid area and give it a name. You can use any number of adjacent ones. To declare a single empty cell. As long as there are no Spaces between the dots, they represent a single cell.

  .container {
        margin-left: 30%;
        width: 200px;
        height: 200px;
        display: grid;
        grid-template-columns: [first] 50px [line2]50px [line3]50px;
        grid-template-rows: [first]50px [rowline2 line2]50px [line3]50px [end];
        grid-row-gap:5px;
        grid-column-gap:5px;
        grid-template-areas: "head head "
                              ". main"
                            ". foot";
    }
Copy the code

Effect:

Note:

The name of the region affects the grid lines. The start grid line for each region is automatically named -start and the end grid line is automatically named -end.

For example, if the region name is header, the horizontal and vertical grid lines at the start position are called header-start, and the horizontal and vertical grid lines at the end position are called header-end.

4. Grid alignment

The justify-content attribute is the horizontal (left – middle – right) position of the entire content area in the container, and the align-content attribute is the vertical (top – middle – bottom) position of the entire content area.

This refers to how the entire content is arranged in the container

The values are:

  • Start – Aligns the start border of the container.
  • End – Aligns the end border of the container.
  • Center – The container is internally centered.
  • Stretch – When item size is not specified, stretch takes up the entire grid container.
  • Space-around – Equal spacing on both sides of each project. As a result, the space between items is twice as large as the space between items and the container borders.
  • Space-between – Items spaced equally with no spacing between items and container borders.
  • The space- instituted – an item evenly spaced with the item, and an item evenly spaced with the container border.

The place-content attribute is a combination of the align-content attribute and the context-content attribute. Place-content:

< context-content >

    .container {
        margin-left: 30%;
        width: 200px;
        height: 200px;
        display: grid;
        grid-template-columns: repeat(3.50px);
        grid-template-rows: repeat(3.50px);
        grid-row-gap:5px;
        grid-column-gap:5px;
        background: #def1a9;
        justify-content: start;
        align-content: end;
    }
Copy the code

Set a horizontal to the left, vertical to the bottom. Effect:

Set up in the middle

justify-content: center;
align-content: center;
Copy the code

5. Cell versus cell

The context-items property sets the horizontal position of the cell’s content (left, middle, and right), and the align-items property sets the vertical position of the cell (top, middle, and bottom)

Values:

  • Start: Aligns the beginning edge of the cell.
  • End: Aligns the end edge of the cell.
  • Center: Cell is internally centered.
  • Stretch: stretches to fill the entire width of a cell (default).

To give an example, use context-items:

Context-items: start — aligns the beginning edge of the cell

Context-items: end– aligns the end edge of the cell

justify-items: center; — Horizontal center

justify-items: stretch; (Default) stretch to cover the entire width of the cell.

6. grid-auto-flow

The grid-auto-flow property controls how the automatic layout algorithm works, specifying exactly how the elements that are automatically laid out in the grid are arranged. The default placement order is “first column after column”, that is, the first row is filled before the second row is started

If changed to:

grid-auto-flow: column;
Copy the code

Effect:

So let’s see what values we can take

grid-auto-flow: row|column|dense|row dense|column dense;
Copy the code
value describe
row The default value. Place grid elements by filling each row, adding new columns if necessary.
column Place grid elements by filling each column, adding new columns if necessary.
dense This keyword specifies that the automatic layout algorithm uses a “dense” heaping algorithm to try to fill the space left in the grid if smaller elements appear later. Doing so will fill in the blanks left by the larger elements, but it can also cause the original order to be messed up.
row dense Fill the previous blanks in the grid by row
column dense Fill the previous blank space in the grid by column

Specifies how the automatic layout algorithm works, specifying exactly how the elements to be automatically laid out in the grid are arranged.

What does that mean?

When I create a 2 by 3 grid, I make the third grid occupy two cell widths, as shown below

<body>
    <div class="grid-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
    </div>
</body>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    body {
        height: 100%;
    }
    .item3 {
        grid-column: auto / span 2;
    }
    .grid-container {
        width: 300px;
        height: 200px;
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-gap: 10px;
        background-color: #2196F3;
        padding: 10px;
        /* grid-auto-flow: row dense; * /
    }
    .grid-container>div {
        background-color: rgba(255.255.255.0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
    }
</style>
Copy the code

When I set grid-Auto-flow: Row dense; Fills in the space left above each line.

Grid-column: auto/span 3; Grid-auto-flow: row; I’m going to add a line, remember I only set up a 2 by 3 grid.

Set it to grid-auto-flow: column; Deficiencies will add a column.

Supplement:

The grid-auto-columns and grid-auto-rows properties set the column width and row height of the extra grid automatically created by the browser. If these two attributes are not specified, the browser determines the column width and row height of the new grid solely based on the size of the cell content.

7. Grid-template attribute, grid attribute

The grid-template attribute is a combination of grid-template-columns, grid-template-rows, and grid-template-areas.

Grid attributes are grid-template-rows, grid-template-columns, grid-template-columns, and areas. Grid-auto-rows, grid-auto-columns, and grid-auto-flow are combined abbreviations.

Personally, I don’t like abbreviations, one or two of the same type are ok, and multiple different attribute abbreviations make for poor readability. Depends on the person.

3. Attributes on the project

Project properties, as the name implies, are properties defined on the child node of the parent container.

1. Grid-column attribute, grid-row attribute

Grid-column is a combination of grid-column-start and grid-column-end, and grid-row is a combination of grid-row-start and grid-row-end.

That’s the beauty of the grid, I feel. It can specify where items are placed, that is, which grid areas can be placed, making the layout flexible and complex. The method is to specify which grid line the project’s four borders are located on.

  • grid-column-startProperty: Vertical gridline with the left border
  • grid-column-endProperty: Vertical gridline on which the right border is located
  • grid-row-startProperty: horizontal gridline on which the top border is located
  • grid-row-endProperty: horizontal gridline on which the bottom border is located

Such as:

<body>
    <div class="container">
        <divWave item1 class = "" > < /div>
        <divClass = "item2" > diffuse < /div>
        <divClass = "item3" > < Lord /div>
        <divClass = "item4" > right < /div>
        <divClass = "item5" > code farmers < /div>
    </div>
</body>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    body {
        height: 100%;
    }
    .container {
        width: 300px;
        height: 200px;
        display: grid;
        grid-template-columns: repeat(3.50px);
        grid-template-rows: repeat(3.50px);
        grid-gap: 5px;
        background-color: #2196F3;
        padding: 10px;
        justify-content: center;
        align-content: center;
    }
    .item1 {
        grid-column:1 / 3;
        background: #0F85CC;
    }
    .item2 {
        grid-row: 1 / 3;
        grid-column: 3 / 4;
        background: #1fe605;
    }
    .item3 {
        grid-row: 2/4;
        grid-column: 1/2;
        background: burlywood;
    }
    .item4 {
        grid-row: 3/4;
        grid-column: 2/4;
        background: #10caf9;
    }
    .item5 {
        border-radius: 50%;
        text-align: center;
        background: #E60537;
    }
</style>
Copy the code

Effect:

If no grid lines are specified, the default is 1,2,3…..

There are several ways to write it:

  • number: can be a number to refer to a numbered grid line or a name to refer to a named grid line
  • span : Grid items span a specified number of grid tracks
  • span : The grid item crosses tracks until it hits the named grid line
  • Auto: Automatic layout, or automatic crossing, or crossing a default track

Such as:

.item-c {
  grid-column: 3 / span 2; / / from the first3Start with a grid line across two grid-row columns: divname /5; // start with divname5Grid line}Copy the code

2. The grid – area property

The grid-area property specifies which grid area the project is placed in.

Grid-area property can also be used as a combination of grid-row-start, grid-column-start, grid-row-end, and grid-column-end to specify the location of the project directly.

Such as:

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
Copy the code

The usage here is as unexplained as above.

3. Justify -self, align-self, place-self

The sequence-self property sets the horizontal position of the cell’s content (left – center right), exactly as the sequence-items property is used, but only for a single item.

The align-self property sets the vertical position (top, middle, bottom) of the cell’s contents, exactly as the align-items property is used for a single item.

The place-self attribute is a combination of the align-self and context-self attributes.

Here is a simple demonstration of the effect on the child element, only affects the arrangement of its own element

.item1{
        justify-self: start;
    }
Copy the code

This is the end of our grid layout.

Write in the last

Finally, I would like to share my own drawing, drawing an Olympic rings with grid layout. Next article shui🚣 code.

Comments are welcome. The nuggets will be giving away 100 nuggets in the comments section after the diggnation campaign. See the campaign article for details. “Like” + “collect” one key three links. You’re the next lucky one.

🤺 🏇 🏂 🏄 came ️ 🏄 ♀ ️ 🚣 🏊 sharing:

Since you look for a road, why to inquire how long to go

⛹ ️ 🏋 ️ ♀ ️ 🚴 🚴 came ️ 🚵 🚵 ♀ ️ 🤸 ♀ ️ 🤼