Grid layout record

Basic concepts: Containers and projects

Areas that are laid out in a grid are called containers, and areas within a container that are positioned in a grid are called items

Container attribute

grid-template-columns:100px 200px

Define the column width of a cell and write several values as many columns

grid-template-rows:100px 20px

Defining the row height of a cell is a few rows

Repeat (3200 px) properties

Three columns, each 200px wide, take two arguments. The first argument is the number of repetitions (column 3 above), and the second argument is the value to be repeated.

It is also ok to repeat() a pattern.

Repeat (3, 100px, 20px, 80px, 30px) repeat(3, 100px, 20px, 80px, 30px) repeat(3, 100px, 20px, 80px, 30px

auto-fill

Sometimes the cell size is fixed, but the container size is uncertain. If you want each row (or column) to contain as many cells as possible, you can use the auto-fill keyword to indicate auto-fill.

Fr keyword

The grid layout provides the FR keyword (short for fraction, meaning “fragment”) to facilitate the representation of proportional relationships. If the columns are 1fr and 2FR wide, the latter is twice as large as the former. grid-template-columns: 100px 1fr 2fr; The width of the first column is 100px, the next two columns are filled with the remaining width, and the second column is twice the width of the first column

minmax()

The function produces a range of lengths, indicating that the length is in the range. It takes two parameters, a minimum and a maximum. grid-template-columns: 100px 1fr minmax(200px,1fr); The width of the first column is 100px, the second column is automatically allocated, the third column is at least 200px, and the maximum is automatically allocated.

grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); Represents that there are no fixed columns, each column is automatically allocated, but the minimum width is 280px

The auto keyword

The auto keyword indicates that the length is determined by the browser. grid-template-columns: 100px auto 100px; grid-template-rows: 100px 100px auto;

Placement order of grid-auto-flow container child elements

Grid-auto-flow: column; Grid-auto-flow: column;Copy the code

Attribute values

Row precedes row

Column is placed first and then row

The following two values are mainly used for, after some items are specified, how can the remaining items be automatically placed

row dense

column dense

The normal nine-grid arrangement

#navMore { display: grid; The grid - the template - the columns: repeat (3, 50 px); The grid - the template - rows: repeat (3, 50 px); }Copy the code

Set the default display after the first and second items occupy two cells. You can see that there is a space after the first line, because item 3 is followed by item 2 by default

Grid-auto-flow: Row dense; #navMore { display: grid; The grid - the template - the columns: repeat (3, 50 px); The grid - the template - rows: repeat (3, 50 px); grid-auto-flow: row dense; }Copy the code

You can see that after the use of Row dense, the Spaces are filled up, which means “first and then”, and filled as tightly as possible with no Spaces.

The figure above fills the first row and then the second row, so item 3 is immediately following item 1. Items 8 and 9 will be in the fourth row.

Modify to the effect of colum dense, first line after line

#navMore { display: grid; The grid - the template - the columns: repeat (3, 50 px); The grid - the template - rows: repeat (3, 50 px); grid-auto-flow: column dense; }Copy the code

The figure above fills the first column and then the second column, so item 3 is immediately following item 2. Items 8 and 9 will go to the bottom of the list.

Item location attribute

The justify – the items property

The align – the items property

Place – the items property

The above three properties set the horizontal and vertical positions of cell contents

The horizontal and vertical positions represented by justify-items and align-items are start: justify the start position end: justify the end position Center: justify the center position Stretch, fill cell place-items is a combination of context-items and align-items with the shorthand attribute place-items:start endCopy the code

Here is the effect of place-items: Start end

Content area location

The justify – content attribute

The align – content attribute

Place – the content attribute

These properties set the location of the project, as shown in the following example

Justify -content is the same as align-content 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. Place-content is a combination of the two aboveCopy the code

CSS code

.box{
  width: 500px;
  height: 500px;
  margin-left: 100px;
  display: grid;
  border: 1px solid #00BC00;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 500px;
  justify-content: space-evenly;
}
.container{
  display: grid;
  /* width: 200px; */
  background: #C077AF;
}
.container:last-child{
  display: grid;
  background: #C4072C;
}
Copy the code

The HTML code

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

The grid – auto attribute

Sets the height and width of the current column or row when the specified number of columns or rows is exceeded

If the layout is set to 3 by 3 columns, but now has rows 4 and 5, then grid-auto-rows: 50px; Set up the

So the height for the first three lines is 100px, and the height for more than three lines is 50px

#navMore { display: grid; The grid - the template - the columns: repeat (3100 px); The grid - the template - rows: repeat (3100 px); /* grid-auto-flow: column dense; */ grid-auto-rows: 50px; }Copy the code

The project properties

The following property is which gridline to locate

The grid – column – start 1; Start with the first grid line

The grid – column – end 3; End on the third grid line

The grid – row – start 2;

The grid – row – end 4;

Just as items 8 and 9 in the previous image effect have different columns in different rows, this is implemented by the following code

.item-8 {
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: #00bc00;
  }
  .item-9 {
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start: 3;
    grid-column-end: 4;
    background-color: #c4072c;
  }
Copy the code

Grid-column – There is another property in this series that means span

grid-column-start: span 3; And the grid - column - end: span 3; The same effect means spanning 3 grids equal to grid-column-start: 1; grid-column-end: 4; Grid-column: 1/3 grid-row:2/4 span grid-column: 1/span 3; Spanning 3 gridsCopy the code

Cell content location Settings

The justify – self properties

The align – self properties

Place – self properties

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.

.item { justify-self: start | end | center | stretch; align-self: start | end | center | stretch; }

Either of these attributes can take on the following four 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). Here is an example of illustration-self: start.

.item-1 { justify-self: start; }

According to nguyen other teacher blog learning records www.ruanyifeng.com/blog/2019/0…