• 欢迎来到本站,本站主要做程序员相关技术、博客、笔记,如果喜欢本网站那么赶紧使用Ctrl+D 收藏吧!
  • 如果有任何疑问,可以在下方文章下方留下你的评论~

[note] CSS Grid Layout – The most detailed teaching of “CSS Grid Layout”

生活日常 8个月前 (10-06) 2次浏览 0个评论

Ⅰ. Description

CSS Grid Layout – You don’t have to use bootstrap.

Grid Layout is the most powerful CSS layout scheme.
It divides the web page into grids, and can combine different grids arbitrarily to make various layouts. Previously, only through the complex CSS framework to achieve the effect, now the browser built-in.

Ⅱ. Basic Concepts

Before learning grid layout, you need to understand some basic concepts.

2.1 Containers and Items

The area with grid layout is called "container". The sub element inside the container is located by grid, which is called "item".

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

In the above code, the outermost <div> element is the container, and the inner three <div> elements are the project.

2.2 Rows and Columns

The horizontal area inside the container is called "row" and the vertical area is called "column".

[note] CSS Grid Layout - The most detailed teaching of

2.3 Cells

The intersection area of rows and columns is called "cell".
Normally, n rows and m columns produce n * m cells. For example, 3 rows and 3 columns produce 9 cells.

[note] CSS Grid Layout - The most detailed teaching of

The figure above is a 4 * 4 grid with 5 horizontal and 5 vertical grid lines.

Ⅲ. Container properties

The properties of grid layouts fall into two categories. One is defined on the container, called the container property; the other is defined on the item, called the item attribute.
This section starts with container properties.

3.1 display property

Display: grid specifies that a container is grid layout.

div {
  display: grid;
}

[note] CSS Grid Layout - The most detailed teaching of

The image above shows the effect of "display: grid".

By default, container elements are block level elements, and you can also set them as inline elements.

div {
  display: inline-grid;
}

[note] CSS Grid Layout - The most detailed teaching of

The image above shows the effect of "display: inline-grid".

Note: after setting it to grid layout, the settings of float,display: inline-block,display: table-cell, vertical-align and column-* of container child elements (items) will be invalid.

3.2 grid-template-columns ,grid-template-rows

After the container has specified the grid layout, the next step is to divide the rows and columns.

The attribute grid-template-columns defines the column width of each column, and the attribute grid-template-rows defines the row height of each row.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

The code above specifies a grid of three rows and three columns, with the width of each column and the height of each row being 100px.

[note] CSS Grid Layout - The most detailed teaching of

In addition to using absolute units, you can also use percentages.

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

(1)repeat()

Sometimes, it is very troublesome to write the same value repeatedly, especially when there are many grids. In this case, you can use the repeat() function to simplify duplicate values. The above code is rewritten as follows with repeat().

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

repeat() takes two parameters. The first parameter is the number of repetitions (3 in the previous example), and the second parameter is the value to be repeated.

repeat() can also repeat a pattern.

grid-template-columns: repeat(2, 100px 20px 80px);

The above code defines 6 columns, the width of the first and fourth columns is 100px, the second and fifth columns are 20px, and the third and sixth columns are 80px.

[note] CSS Grid Layout - The most detailed teaching of

(2) Keyword auto-fill

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.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

The code above indicates that the width of each column is 100px, and then it is automatically filled until the container cannot place more columns.

[note] CSS Grid Layout - The most detailed teaching of

(3) Keyword fr

To facilitate the representation of scale relations, the grid layout provides fr keyword (abbreviation for fraction). If the width of the two columns is 1fr and 2fr respectively, it means that the latter is twice the former.

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

The code above represents two columns of the same width.

[note] CSS Grid Layout - The most detailed teaching of

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

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

The code above shows that the width of the first column is 150 px, and the width of the second column is half the width of the third column.

[note] CSS Grid Layout - The most detailed teaching of

(4)minmax()

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.

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

In the above code, minmax (100px, 1fr) means that the column width is not less than 100px and not greater than 1fr.

(5) Keyword auto

The keyword auto means that the length is determined by the browser itself.

grid-template-columns: 100px auto 100px;

In the code above, the width of the second column is basically equal to the maximum width of the cell in that column.

(6) The name of the gridline

In the attribute grid template columns and grid template rows, square brackets can also be used to specify the name of each gridline, so as to facilitate future reference.

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

The code above specifies that the grid layout is 3 rows * 3 columns, so there are 4 vertical gridlines and 4 horizontal gridlines. In square brackets are the names of the eight lines in turn.

(7) Layout example

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

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

The code above sets the left column to 70% and the right column to 30%.

Bootstrap’s 12 grid layout is easy to write:

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

3.3 grid-row-gap ,grid-column-gap ,grid-gap

The attribute grid-row-gap sets the row to row spacing (row spacing), and the attribute grid-column-gap sets the column to column spacing (column spacing).

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

In the above code, grid-row-gap is used to set the row spacing, and grid-column-gap is used to set the column spacing.

[note] CSS Grid Layout - The most detailed teaching of

The attribute grid-gap is a combined abbreviation of grid-column-gap and grid-row-gap. The syntax is as follows:

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

Therefore, the above CSS code is equivalent to the following code:


.container {
  grid-gap: 20px 20px;
}

If grid-gap omits the second value, the browser assumes that the second value is equal to the first value.

3.4 Property grid-template-areas

Grid Layout allow you to specify area, a region consisting of one or more cells. The property grid-template-areas defines the region.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

The above code first divides 9 cells, and then names them 9 regions from a to I, corresponding to these 9 cells.

Multiple cells are merged into a region as follows:


grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

The above code divides the 9 cells into 3 areas: a, b and c.

Here is an example of a layout:

grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";

In the above code, the header area is at the top, the footer area is at the bottom, and the main and sidebar are in the middle.

If some areas do not need to be utilized, they are represented by "points" (.) :

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

3.5 Property grid-auto-flow

After meshing, the sub elements of the container are automatically placed in each grid in order.

The default placement order is to fill the first row and then start placing the second row, which is the order of the numbers in the following figure.

[note] CSS Grid Layout - The most detailed teaching of

This order is determined by the property grid-auto-flow, and the default value is row. You can also set it to column

grid-auto-flow: column;

After column is set in the above code, the placement order will change to the following figure:

[note] CSS Grid Layout - The most detailed teaching of

In addition to setting the grid-auto-flow properties to row and column, they can also be set to row dese and column dese.

These two values are mainly used for how to automatically place the remaining items after some items have been specified.

In the following example, project 1 and project 2 occupy two cells each, and then, with the default grid auto flow: row scenario, the following layout is generated:

[note] CSS Grid Layout - The most detailed teaching of

Set to "row dense":

grid-auto-flow: row dense;

The effect of the above code is as follows:

[note] CSS Grid Layout - The most detailed teaching of

If you change the setting to "column dense":

grid-auto-flow: column dense;

[note] CSS Grid Layout - The most detailed teaching of

3.6 justify-items,align-items,place-items

The attribute justify-items sets the horizontal position of the cell content, and the attribute align-items sets the vertical position of the cell content.

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

The two properties are written exactly the same way, and the following values can be taken:

  • 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).
.container {
  justify-items: start;
}

The above code indicates that the content of the cell is aligned to the left, and the effect is shown in the following figure:

[note] CSS Grid Layout - The most detailed teaching of

.container {
  align-items: start;
}

The above code indicates that the content header of the cell is aligned, and the effect is shown in the following figure:

[note] CSS Grid Layout - The most detailed teaching of

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

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

Example:

place-items: start end;

3.7 Property justify-content, align-content, place-content

The attribute justify-content is the horizontal position of the entire content area in the container, and the attribute align-content is the vertical position of the entire content area.

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
  • start – align the start border of the container:

[note] CSS Grid Layout - The most detailed teaching of

  • end – aligns the end border of the container:

[note] CSS Grid Layout - The most detailed teaching of

  • center – the inside of the container is centered:

[note] CSS Grid Layout - The most detailed teaching of

  • stretch – when the project size is not specified, the stretch occupies the entire mesh container:

[note] CSS Grid Layout - The most detailed teaching of

  • 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:

[note] CSS Grid Layout - The most detailed teaching of

  • space-between – items are equally spaced, and there is no space between items and container borders:

[note] CSS Grid Layout - The most detailed teaching of

  • space-even – the spaces between items are equal, and the spaces between items and container borders are the same length:

[note] CSS Grid Layout - The most detailed teaching of

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

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

Example:

place-content: space-around space-evenly;

3.8 Property grid-auto-columns,grid-auto-rows

Defines the width and height of the outside of the grid.

In the following example, the grid is 3 * 3, but item 8 is specified in line 4 and Item 9 is specified in line 5:

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}

[note] CSS Grid Layout - The most detailed teaching of

Ⅳ. Properties of item

4.1 grid-column-start, grid-column-end, grid-row-start, grid-row-end

The location of an item can be specified by specifying which grid line the four borders of the item are located:

grid-column-start: the vertical gridline of the left border
grid-column-end: the vertical gridline of the right border
grid-row-start: the horizontal gridline of the top border
grid-row-end: the horizontal gridline of the bottom border

Example:

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

The code above specifies that the left border of item 1 is the second vertical gridline, and the right border is the Fourth vertical gridline.

[note] CSS Grid Layout - The most detailed teaching of

Example2:


.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

[note] CSS Grid Layout - The most detailed teaching of

4.2 grid-area

The grid-area property specifies the area in which the item is placed:

.item-1 {
  grid-area: e;
}

In the above code, item 1 is located in area E, and the effect is shown in the figure below.

[note] CSS Grid Layout - The most detailed teaching of

4.3 justify-self, align-self

The property justify-self sets the horizontal position of cell content, and the property align-self sets the vertical position of cell content.

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

Example:

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

[note] CSS Grid Layout - The most detailed teaching of


中国笔友, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:[note] CSS Grid Layout – The most detailed teaching of “CSS Grid Layout”
喜欢 (0)
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址