Explain the grid layout and flex layout of dispaly in CSS3

Time:2020-10-31

Gird layout is similar to flex layout in that it divides the internal items of the container.

  • Flex layout is an axis layout, which can only specify the location of the project for the axis, and can be regarded as a one-dimensional layout
  • Grid layout is to divide the container into rows and columns, generate cells, and then specify the cell where the project is located, which can be regarded as a two-dimensional layout.
  • The parent element becomescontainer, multiple child elements inside the parent element becomeproject

Flex flexible layout (container properties)

Flex is the abbreviation of flexible box, any container can be set to Felx layout.

Flex is called a Felx container, and all child elements automatically become container members.

  1. Flex direction determines the direction of the spindle (i.e. the arrangement direction of the project)
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content

Flex direction property: determines the direction of the spindle (i.e. the arrangement direction of items)

  • Row (default): the horizontal direction of the spindle, the starting point is at the left end;

.content-box {
       display: flex;
       flex-direction: row;
   }

Row reverse: the spindle is in horizontal direction, and the starting point is at the right end;


.content-box {
       display: flex;
       flex-direction: row;
   }

Column: the vertical direction of the main shaft, with the starting point at the upper edge;


.content-box {
       display: flex;
       flex-direction: column;
   }

Column reserve: the vertical direction of the main axis, with the starting point at the bottom edge.


.content-box {
       display: flex;
       flex-direction:column-reverse;
   }

The flex wrap attribute: defines line breaks

By default, they are all on one axis. The flex wrap attribute is defined. If an axis cannot be arranged, the corresponding attribute is used to wrap the line.

Nowrap (default): does not wrap.


.content-box {
       display: flex;
      flex-wrap: nowrap;
   }

Wrap: wrap, with the first line at the top.


.content-box 
{       
display: flex;      
flex-wrap: wrap;   
}

Wrap reverse: wrap the line, with the first line at the bottom.


  .content-box 
{    
display: flex;   
flex-wrap: wrap-reverse;  
}

Flex flow attribute: abbreviation of flex direction and flex wrap, default row nowrap

The flex flow property is a short form of the flex direction property and flex wrap property. The default value is row nowrap.


.content-box
 {   
  flex-flow: <flex-direction> || <flex-wrap>;
}

Justify content property: defines the alignment of items on the spindle.

The justify content property is the alignment defined on the spindle.

Flex start (default): left aligned.


 .content-box {
       display: flex;
       justify-content: flex-start;
   }

Flex end: right aligned.


.content-box {
       display: flex;
       justify-content: flex-end;
   }

Center: center alignment.


.content-box {
       display: flex;
       justify-content: center;
   }

Space between: align both ends, and the spaces between items are equal.


 .content-box {
       display: flex;
       justify-content: space-between;
   }

Space around: the spaces are equal on both sides of each item, and the spacing between items is twice as large as that between items and borders.


 .content-box {
       display: flex;
       justify-content: space-around;
   }

Space even: the interval is equal, and the interval between items is equal.

Property: defines the alignment on the intersection axis

Stretch (default): if the project is not set to height or set to auto, it will occupy the height of the entire container.


  .content-box {
       display: flex;
       align-items: stretch;
   }

Flex start: start point alignment.


 .content-box {
       display: flex;
       align-items: flex-start;
   }

Flex end: end alignment.


 .content-box {
       display: flex;
       align-items: flex-end;
   }

Center: center alignment.


 .content-box {
       display: flex;
       align-items: center;
   }

Baseline: the baseline alignment of the first line of text in an item.


 .content-box {
       display: flex;
       align-items: baseline;
   }

Align content attribute: defines the alignment of multiple axes

This property does not work best if the project has only one axis. So flex wrap must be set in the property.

Stretch: (default) the axis occupies the entire intersection axis


  .content-box {
       display: flex;
       flex-wrap: wrap;
       align-content: stretch;
   }

Flex start: align the start point with the start point of the cross axis


.content-box {
       display: flex;
       flex-wrap: wrap;
       align-content: flex-start;
   }

Flex end: the end point is aligned with the end point of the cross axis


 .content-box {
       display: flex;
       flex-wrap: wrap;
       align-content: flex-end;
   }

Center: align to the midpoint of the intersection axis


   .content-box {
       display: flex;
       flex-wrap: wrap;
       align-content: center;
   }

Space between axes: equidistant between axes, aligned with both ends of intersecting axes, and spacing between axes is evenly distributed


   .content-box {
       display: flex;
       flex-wrap: wrap;
       align-content: space-between;
   }

Space around: the two sides of the axis are equidistant, and the spacing on both sides of each axis is equal, that is, the spacing between the axes is twice as large as that between the axis and the frame


  .content-box {
       display: flex;
       flex-wrap: wrap;
       align-content: space-around;
   }

Flex flexible layout (project properties)

Order property: defines the order in which items are arranged.

The smaller the value is, the higher the arrangement will be. The default value is 0 and negative value can be used


  .box:nth-child(2) {
       order:-2
   }
   .box:nth-child(3) {
       order:-3
   }
   .box:nth-child(4) {
       order:4
   }
   .box:nth-child(5) {
       order:5
   }
   .box:nth-child(6) {
       order:6
   }

Flex grow property: defines the magnification of the project

The default value is 0, that is, if the space is left, it is not enlarged. It can be a decimal, and it takes up the remaining space proportionally.

If all items have the same flex growth value, the remaining space is divided equally.


 .box {
       flex-grow: 5;
   }

If one project flex grow is 2 and the others are 1, the remaining space occupied by the project is twice as much as the rest


  .box:nth-child(3) {
       flex-grow: 8;
   }

example:


 .box {
       flex-grow: 0;
   }
   .box:nth-child(2) {
       flex-grow: 3;
   }
   .box:nth-child(3) {
       flex-grow: 8;
   }
   .box:nth-child(4) {
       flex-grow: 2;
   }
   .box:nth-child(5) {
       flex-grow: 7;
   }

Gird grid layout (container properties)

Gird layout is to divide the web page into grids, which can combine different grids arbitrarily to make various layouts. Previously, only through the complex CSS framework to achieve the effect, now with gird layout can be achieved.

The horizontal area inside the container is calledThat’s ok(row), the vertical area is calledcolumn(column),That’s okandcolumnThe intersection area is calledCell(cell)。

Normally,nLine summColumns produce n * M cells. (there are nine cells in three rows and three columns).

The line is called a grid. The horizontal grid line divides the trip, and the vertical grid line divides the column.

Under normal conditionsnThe row has n + 1 horizontal gridlines,mM + 1 vertical gridlines are listed. (there are four horizontal gridlines in three rows)

Grid template columns attribute, grid template rows attribute

After the container specifies the grid layout, it is then dividedThat’s okandcolumn。 The grid Template Column property defines the width of each column, and the grid template rows property defines the height of each row.

.content-box {
       display: grid;
       grid-template-columns: 160px 160px 160px 160px 160px;
       grid-template-rows: 160px 160px 160px 160px 160px;
   }
/*Or*/
   .content-box {
       display: grid;
       grid-template-columns: 20% 20% 20% 20% 20%;
       grid-template-rows: 20% 20% 20% 20% 20%;
   }

The code above specifies a grid of five rows and five columns with a column width and height of 160px

Repeat() function

Sometimes, it is very troublesome to write the same value repeatedly, especially when there are many grids. In this case, we can use the repeat() function to simplify the repeated values.

Repeat() takes two parameters, the first is the number of repetitions and the second is the value of the repetition.

.content-box {
       display: grid;
       grid-template-columns: repeat(5, 160px);
       grid-template-rows: repeat(5, 160px);
   }
/*Or*/
    .content-box {
        display: grid;
        grid-template-columns: repeat(5, 20%);
        grid-template-rows: repeat(5, 20%);
    }

It is also possible to repeat a pattern.

The width of the first and fourth columns is 160px, the second and fifth columns are 100px, and the third and sixth columns are 140px


  .content-box {
       display: grid;
       grid-template-columns: repeat(2, 160px 100px 140px);
   }

Auto fill keyword

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


  .content-box {
       display: grid;
       grid-template-columns: repeat(auto-fill, 160px);
   }

Fr keyword

To facilitate the representation of scale relationships, the grid layout provides the fr keyword. If the width wind of the two columns is 1fr and 2fr,

It means that the latter is twice as much as the former.


  .content-box {
       display: grid;
       grid-template-columns: 1fr 1fr;
   }

Fr can be used in combination with units of absolute length, which is very convenient.


 .content-box {
       display: grid;
       grid-template-columns: 150px 1fr 2fr;
   }

The first column is 150px wide, and the second column is half the width of the third column

Auto keyword

The auto keyword means that a browser decides its own length.


.content-box {
       display: grid;
       grid-template-columns: 160px auto 160px;
   }

The width of the first and third columns is 160px, with the maximum width in the middle, unless the cell content is set to min width, and this value is greater than the maximum width.

Minmax() function

The minmax() function produces a length range, which means that the length is in this range. It takes two parameters, the minimum and the maximum.


  .content-box {
       display: grid;
       grid-template-columns: 1fr 1fr minmax(100px, 1fr);
   }

The minmax (100px1fr) function indicates that the column width cannot be less than 100px or greater than 1fr.

The name of the gridline

In the grid template columns and grid template rows properties, brackets can also be used to specify the name of each gridline for future reference.


   .content-box {
       display: grid;
       grid-template-columns: [c1] 160px [c2] 160px [c3] auto [c4];
       grid-template-rows: [r1] 160px [r2] 160px [r3] auto [r4];
   }

The code above specifies that the grid layout is 3 rows by 3 columns, so there are 4 vertical gridlines and 4 horizontal gridlines. In square brackets, the names of the eight lines are in turn. Grid layout allows the same line to have multiple names, such as [Fifth line row-5].

Layout example

The grid template columns property is useful for page layout. A two column layout requires only one line of code.


   .content-box {
       display: grid;
       grid-template-columns: 70% 30%;
   }

70% for the left column and 30% for the right column

The traditional 12 grid layout is easy to write.


   .content-box {
       display: grid;
       grid-template-columns: repeat(12, 1fr);
   }

Gird row gap attribute, gird column gap attribute

Column gap (the interval between rows and columns).


  .content-box {
       display: grid;
       grid-template-rows: repeat(4, 160px);
       grid-template-columns: repeat(4, 160px);
       grid-row-gap: 50px;
       grid-column-gap: 50px;
   }

Grid gap property

The grid gap attribute is the abbreviation of grid column gap and grid row gap.

grid-gap: <grid-row-gap> <grid-column-gap>


   .content-box {
       display: grid;
       grid-template-rows: repeat(4, 160px);
       grid-template-columns: repeat(4, 160px);
       grid-gap: 50px;
   }

If grid gap omits the second value, the browser assumes that the second value is equal to the first value. According to the latest standard, the grid prefix of the above three attribute names has been deleted. Grid column gap and grid row gap are written as column gap and row gap, and grid gap is written as gap.

Property grid template areas

The grid layout allows you to specify an area, which consists of a single or multiple cells. The grid template areas property is used to specify regions.


   .content-box {
       display: grid;
       grid-template-areas: 'a b c'
                            'd e f'
                            'g h i';
   }

The above code first divides nine cells, and then names them as the nine regions from a to I, corresponding to these nine cells, or dividing the nine cells into three regions a, B and C.


   .content-box {
       display: grid;
       grid-template-areas: 'a a a'
                            'b b b'
                            'c c c';
   }

You can use the header area header, the bottom is the footer area, and the middle part is main and sidebar.


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

When we do not need to use some areas, we use “point” (.).


   .content-box {
       display: grid;
       grid-template-areas: 'a . c'
                            'd . f'
                            'g . i';
   }

Grid auto flow property

1、 After meshing, the sub elements of the container are automatically placed in each grid in order. The default placement order is “first, then column,” filling the first row and placing the second row at the beginning.

2、 This order is determined by the grid auto flow property, and the default value is row, “first column.”. You can also set it to column to “column first, then row.”.

//Column before row   
.content-box {
       display: grid;
       grid-template-areas: 'a a a'
                            'b b b'
                            'c c c';
       grid-auto-flow: column;
   }

Row dense and column dense

In addition to row and column, the grid auto flow property can also be set to row dese and column dese. These two values are mainly used to specify the location of some items, and how to set the remaining items automatically.

Let project 1 and project 2 have three cells each, and then in the default grid auto flow case, the following layout will be generated.


 .content-box {
       display: grid;
       grid-template-columns: repeat(5, 160px);
       grid-template-rows: repeat(5, 160px);
       grid-auto-flow: row;
   }
   .box:nth-child(1) {
        grid-column-start: 1;
        grid-column-end: 4;  
   }
   .box:nth-child(2) {
        grid-column-start: 1;
        grid-column-end: 4;  
   }

In the above figure, the position after item 1 is empty. This is because item 3 follows item 2 by default, so it will be placed after item 2. When we change the setting to row dense, it means “first, then column”, and fill in as precisely as possible, and try not to appear spaces.

.content-box {
       display: grid;
       grid-template-columns: repeat(5, auto);
       grid-template-rows: repeat(5, auto);
       Grid auto flow: row dense; / * avoid spaces*/ 
   }
.box:nth-child(1) {
       grid-column-start: 1;
       grid-column-end: 4;  
   }
.box:nth-child(2) {
       grid-column-start: 1;
       grid-column-end: 4;  
   }

The first line will be filled first, and then the second line, so item 3 and 3 will follow item 1.

If you change the setting to column dense, it means “column before row” and try to fill in the blanks.

.content-box {
       display: grid;
       grid-template-columns: repeat(5, auto);
       grid-template-rows: repeat(5, auto);
       Grid auto flow: column dense; / * avoid spaces*/ 
   }
.box:nth-child(1) {
       grid-column-start: 1;
       grid-column-end: 4;  
   }
.box:nth-child(2) {
       grid-column-start: 1;
       grid-column-end: 4;  
   }

Justify items attribute, align items attribute

The adjust items property sets the horizontal position (left, middle, right) of the cell content, and the align items property sets the vertical position (top, middle, and bottom) of the cell content.

The two properties are written in exactly the same way. You can use the following property values.


.content-box {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

Start: aligns the start edge of the cell.

The content of the cell is aligned to the left, and the effect is as shown in the following figure.

.content-box {
       display: grid;
       grid-template-columns: repeat(5, 160px);
       grid-template-rows: repeat(5, 160px);
       Justify items: start; / * align the start edge of a cell*/
   }
   .box {
        width: 100px;
        height: 100px;
   }

The content head of the cell is aligned, and the effect is as shown in the following figure.

.content-box {
       display: grid;
       grid-template-columns: repeat(5, 160px);
       grid-template-rows: repeat(5, 160px);
       Align items: start; / * cell content header alignment*/
   }
   .box {
        width: 100px;
        height: 100px;
   }

End: aligns the end edge of the cell.

The content of the cell is aligned at the end edge, and the effect is as shown in the following figure.

.content-box {
       display: grid;
       grid-template-columns: repeat(5, 160px);
       grid-template-rows: repeat(5, 160px);
       Justify items: end; / * content end edge alignment of cells*/
   }
   .box {
        width: 100px;
        height: 100px;
   }

Center: center inside the cell.

Stretch: stretch, covering the entire width of the cell (default).

Place items property

The place items attribute is a combined abbreviation of align items and justify items.

place-items: <align-items> <justify-items>;


place-items: start end

If you omit the second value, the browser considers it equal to the first value.

Justify content attribute, align content attribute

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

The two properties are written in exactly the same way. You can use the following property values.


.content-box {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

The following figures take the justify items attribute as an example. The graphs of align items attribute are exactly the same, except that the horizontal direction is changed to the vertical direction.

Start: aligns the start border of the container.

End: aligns the end border of the container.

Center: center inside the container.

Stretch: when the project size is not specified, the stretch occupies the entire mesh container.

Space around: the spaces on both sides of each item are equal. As a result, the spacing between items is twice as large as that between items and container borders.

Space between: items are equally spaced, and there is no space between items and container borders.

Space even: the spaces between items are equal, and the spaces between items and container borders are the same length.

Place content attribute

The place content attribute is a combined abbreviation of align content attribute and justify content attribute.

place-content: <align-content> <justify-content>;

 


place-content: space-around space-evenly;

If you omit the second value, the browser assumes that the second value is equal to the first value.

Grid auto columns property, grid auto rows property

1、 Sometimes, the specified location of some projects is outside the existing grid. For example, the grid has only three columns, but an item is specified on line 5. At this point, the browser automatically generates extra meshes to place the project.

2、 The grid auto columns property and grid auto rows property are used to set the column width and row height of the redundant grid automatically created by the browser. They are written in exactly the same way as grid template columns and grid template rows. If you do not specify these two properties, the browser determines the column width and row height of the new grid completely based on the size of the cell content.

.content-box {
       display: grid;
       grid-template-columns: repeat(3, 250px);
       grid-template-rows: repeat(3, 200px);
       Grid auto rows: 100px; / * new row height*/
   }
   .box:nth-child(8) {
        line-height: 80px;
        Grid row start: 4; / * sets the fourth row*/
        Grid column start: 2; / * set the second column*/
    } 
	.box:nth-child(9) {
        line-height: 80px;
        Grid row start: 5; / * set the fifth line*/   
        Grid column start: 3; / * set the third column*/
    }

The above code specifies that the new row height is uniformly 100px (the original row height is 200px).

The grid template attribute is a combined abbreviation of grid template columns, grid template rows and grid template areas.

Grid attribute is the combined abbreviation of grid template rows, grid template columns, grid template areas, grid auto rows, grid auto columns, grid auto flow.

From the perspective of easy to read and write, it is recommended not to merge attributes, so we will not introduce these two properties in detail here.

Gird grid layout (project properties)

Grid column start, grid column end, grid row start, grid row end attributes

Grid column start property: the vertical gridline of the left border

Grid column end property: the vertical gridline of the right border

Grid row start property: the horizontal gridline of the top border

Grid row end property: the horizontal gridline of the bottom border

1、 The left border of item 1 is the fifth vertical gridline and the top border is the third horizontal gridline.

.content-box {
        display: grid;
        grid-template-columns: repeat(5, 160px);
        grid-template-rows: repeat(5, 160px);
 }
 .box:nth-child(1) {
        Grid row start: 3; / * the top border is the third horizontal gridline*/
        Grid column start: 5; / * the left border is the fifth vertical gridline*/
 }

With the exception of item 1, other items have no specified location and are automatically arranged by the browser. At this time, their location is determined by the grid auto flow property of the container. The default value of this property is row, so it will be arranged “first, then column”. We can change the value of this property to column, row dense, and column dense to see how the location of other items has changed.

2、 Specifies the effect of four border positions

.content-box {
        display: grid;
        grid-template-columns: repeat(5, 160px);
        grid-template-rows: repeat(5, 160px);
}
.box:nth-child(1) {
        Grid row start: 2; / * the top border is the second horizontal gridline*/
        Grid row end: 5; / * the bottom border is the fifth horizontal gridline*/
        Grid column start: 1; / * the left border is the first vertical gridline*/
        Grid column end: 4; / * the right border is the fourth vertical gridline*/
    }

3、 The values of these four attributes can be specified as the name of the gridline in addition to the grid line number. (same effect as above)


  .content-box {
        display: grid;
        grid-template-columns: [c1] 160px [c2] 160px [c3] 160px [c4] 160px [c5] 160px [c6];
        grid-template-rows: [r1] 160px [r2] 160px [r3] 160px [r4] 160px [r5] 160px [r6];
    }
    .box:nth-child(1) {
        grid-row-start: r2;
        grid-row-end: r5;
        grid-column-start: c1;
        grid-column-end: c4;
    }

4、 The values of these four attributes can also use the span keyword to indicate “span”, which is how many grids are spanned between the left and right borders (top and bottom borders).

.content-box {
        display: grid;
        grid-template-columns: repeat(5, 160px);
        grid-template-rows: repeat(5, 160px);
}
.box:nth-child(1) {
        Grid column start: span 3; / * the left and right borders span three grids*/
        Grid row start: span 2; / * the top and bottom borders span two grids*/
}

The effect is the same as above

.box:nth-child(1) {
        Grid column end: span 3; / * the left and right borders span three grids*/
        Grid row end: span 2; / * the top and bottom borders span two grids*/
}

Using these four properties, if there is an overlap of items, the Z-index property is used to specify the order in which the items overlap.

Grid column attribute, grid row attribute

The grid column attribute is the combined abbreviation of grid column start and grid column end, and the grid row attribute is the combined abbreviation of grid row start attribute and grid row end.


.box:nth-child(1) {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}
.box:nth-child(1) {
        grid-column: 1 / 4;
        grid-row: 2 / 4;
}
/*Equivalent to*/
.box:nth-child(1) {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 2;  
        grid-row-end: 4;
}

The keyword span can be used to represent more than one attribute in the grid.

.box:nth-child(1) {
        grid-column: 1 / span 3;
        grid-row: 2 / span 3;
 } 
/*Equivalent to*/
.box:nth-child(1) {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 2;  
        grid-row-end: 5;
}

The slash and the following parts can be omitted, and they span a grid by default


.box:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
 } 

Grid area property

The grid area property specifies the area in which the item is placed.

.content-box {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(3, auto);
        grid-template-areas: 'a b c'
                             'd e f'
                             'g h i';
    }
    .box:nth-child(1) {
        Grid area: e; / * project 1 is located in area E*/
    }

The grid area attribute can also be used as a combined abbreviation of grid row start, grid column start, grid row end, and grid column end to specify the location of the project directly.


.box:nth-child(1) {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

.box:nth-child(1) {
  grid-area: 3 / 3 / 4 / 4;
}

Justify self attribute, align self attribute, place self attribute

The justify self property sets the horizontal position (left, middle, right) of the cell content, which is exactly the same as the justify items property, but only works on a single item.

The align self property sets the vertical position (top, middle, and bottom) of the cell content, which is exactly the same as the align items attribute, and only works on a single item.

1、 These two properties can take the following four values.


.box:nth-child(1) {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

Start: aligns the start edge of the cell.

End: aligns the end edge of the cell.

Center: center inside the cell.

Stretch: stretch to fill the entire width of the cell (default).

Here’s justify self: startFor example.


.box:nth-child(1) {
  justify-self: start;
}

The place self attribute is a combination of the align self attribute and justify self attribute.


.box:nth-child(1) {
	place-self: <align-self> <justify-self>;
}

For example:


.box:nth-child(1) {
	place-self: center center;
}

If you omit the second value, the place self attribute assumes that the two values are equal.

reference resources

Ruan Yifeng flex layout tutorial: Grammar

Ruan Yifeng CSS grid grid layout tutorial

This article will introduce the grid layout and flex layout of dispaly in CSS3. For more content about grid layout and flex layout of dispaly, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!