This is the 30th day of my participation in the August Challenge

When it comes to CSS layouts, Flex and Grid are a must.

Flexbox is often referred to as a one-dimensional layout, because a Flexbox can only handle one dimensional layout of elements at a time, one row or one column, and because of this feature, Flexbox is more suitable for component and small-scale layouts. The detailed use of Flexbox has been summarized before.

Grid, then, is better at more complex or overall scale layouts.

What is the Grid

The biggest difference between Grid and Flexbox is that Grid is a two-dimensional layout that handles both row and column layouts at the same time, making it more flexible and powerful.

Grid Layout is good at dividing a page into major areas and defining the size, location, hierarchy, and so on of those areas (if the HTML generates those areas).

“Align elements by row or column” sounds like a table. In layout, however, grids are more flexible or simpler than tables. For example, the child elements of a grid container can position themselves so that they are truly overlapping and hierarchical like CSS positioned elements.

attribute

Grid, like Flexbox, has containers and items, and attributes fall into two categories: container attributes (which act on containers) and item attributes (which act on items).

Container attribute

display

Use display to specify a grid layout for a container.

  • gridThe external display type of the container element isBlock-level elementsThe internal display type is Grid
  • inline-gridThe external display type of the container element isInline elementThe internal display type is Grid

When the internal display type is grid, all projects display type is Grid Box.

grid-template-columns & grid-template-rows

Grid-template-\ *, divides rows and columns, defines the name of the grid line and the size of the grid track.

  • grid-template-columnsBased on the column
  • grid-template-rowsBased on the line

Length/percentage

A grid with three rows and three columns, each column width and row height 100px:

  • The length of the 
    .container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
Copy the code
  • The percentage 
    .container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
Copy the code

repeat()

Repeat (), which represents the repeating portion of the grid track, is a more concise way to express a large number of repeating columns.

Takes two arguments, the first is the number of repetitions, and the second is the value to be repeated (which can be a set of values).

.container {
  display: grid;
  grid-template-columns: repeat(3.100px);
  grid-template-columns: repeat(
    2.100px 20px 80px
  ); /* 100px 20px 80px will repeat twice */
}
Copy the code

If the grid container has a certain size or maximum size on the relevant axis and 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
  ); /* Each column is 100px wide and automatically fills until the container cannot place more columns. * /
}
Copy the code

Fr (fraction, fragment)

Fr, non-negative, the elastic coefficient that defines the size of the grid track. Each grid track that uses FR units is proportionally allocated the remaining free space.

For example, the second column is twice as wide as the first:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
Copy the code

The coefficient of elasticity can be used in conjunction with absolute length. For example, if the first column is 100px wide and the second column is half the width of the third column:

.container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
}
Copy the code

minmax()

Minmax () defines a closed range of length and width, with the first argument being the minimum and the second the maximum.

For example, minmax(100px, 1fr) indicates that the column width is not less than 100px and not more than 1fr:

The name of the grid line

Using square brackets, specify the name of each grid line for future reference. Multiple names are allowed for the same line, such as [fifth line row-5].

In a 3 x 3 grid layout, there are 4 vertical grid lines and 4 horizontal grid lines:

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

Gap (grip – gap)

Gap, used to set the gap between grid rows and columns. This property is short for row-gap and column-gap.

It is defined by grid-gap attribute at first, and is gradually replaced by gap.

Grammar:

gap: row-gap column-gap?
Copy the code

Column-gap is optional, and is set to the same value as row-gap when missing.

Set the row spacing to 10px and the column spacing to 20px:

gap: 20px 10px;
Copy the code

The column – gap (grip – column – gap)

Column-gap sets the size of the gap between column elements. (Column spacing)

The row – gap (grip – row – gap)

Row-gap sets the size of the gap between row elements. (Line spacing)

grid-template-areas

Grid-template-areas, used to define areas, where an area consists of one or more cells.

Practice a general layout (as shown in the image above) with the Header at the top (50px high, which fills the container), the side navigation on the left (150px wide, which fills the container), and the content area on the right (auto-fill) and Footer (30px high, which fills the container).

  • Set up thedisplay: grid
  • Area division: three rows and two columnsgrid-template-areas
  • Row/column width and height Settings grid-template-rows/columns
  • Specifies the region location of the current elementgrid-area
.contianer {
  display: grid;
  grid-template-areas:
    "head head"
    "nav main"
    "nav foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

.container > nav {
  grid-area: nav;
  background-color: lightsalmon;
}
Copy the code

If some area is not needed, use “points” (.). Said.

grid-template-areas:
  "a . c"
  "d . f"
  "g . i";
Copy the code

grid-auto-flow

Grid-auto-flow, strategy for controlling project layout (reverse arrangement, dense or not)

This property has two forms:

  • Single keyword:row,columnOr,denseOne of them.
  • Two key words:row dense 或 column dense.

Values:

  • row: The default value for arranging elements row by row, adding new rows if necessary.
  • column: Arranges elements column by column, adding new columns if necessary.
  • dense:Use a “dense” stacking algorithmIf a smaller element appears later, an attempt is made to fill the space left in the grid. Doing so will fill in the blanks left by the larger elements, but it can also cause the original order to be messed up.

*-items

justify-items & align-items

Context-items, which sets the horizontal position of the cell content; Align-items, which sets the vertical position of the cell contents.

Justify -items and align-items are the same.

  • Key words:normal.autoOr,stretchYou can choose any one
  • Baseline alignment:baselineoptionalfirst 或 lastOne is prefixes
  • Position against it:center.start.end.flex-start.flex-end.self-start.self-end.left 或 rightChoose one or the othersafe 或 unsafeOne is prefixes

Common attribute values demo:

  • start

  • end

  • center

  • stretch

place-items

Place-items is a combination of align-items and justify-items.

place-items: <align-items> <justify-items>;
Copy the code

*-content

justify-content & align-content

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

Justify -content & align-content is exactly the same as \*-items.

Display of common attribute values:

  • start

  • end

  • center

  • stretch

  • space-between

  • space-around

  • space-evenly

place-content

Place-content is short for align-content and context-content.

place-content: <align-content> <justify-content>;
Copy the code

grid-auto-columns & grid-auto-rows

Suppose we specify a 2X2 grid layout with grid-template-columns and grid-template-Rows. When we specify one of the items in row 2, column 5 (beyond the existing grid), the browser automatically generates extra grids to place the item.

/* 2X2 grid layout */
.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
}
/* Items in the grid */
.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
/* Net extra items */
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
Copy the code

So, what is the net extra project width and height?

Grid-auto-columns & grid-auto-rows are used to specify the size of the grid extra items. 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.

.container {
  grid-auto-columns: 60px;
}
Copy the code

The project properties

grid-column-* & grid-row-*

Grid-column-start, grid-column-end, grid-row-start, and grid-row-end specify the four borders of the project to determine the size and location of a grid project.

  • grid-column-start: Vertical grid line where the left border is located
  • grid-column-end: Vertical grid line where the right border is located
  • grid-row-start: Horizontal grid line where the upper border is located
  • grid-row-end: Horizontal grid line where the bottom border is located

Values:

  • <line>, can beNumber of grid lines(0 is invalid, negative integer, counting backwards from the end of the explicit grid) orThe name of the grid line
  • span <number> , specifies the number of grid lines to cross. Default is 1. Negative integers or 0 are not valid.
  • span <name>, until the specified grid line is touched (<name>)
  • auto, indicating automatic placement, automatic span or default span is 1.
.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}
Copy the code

Using these four attributes, if an overlap of items occurs, the z-index attribute specifies the order in which the items are overlapped.

grid-column & grid-row

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

grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;
Copy the code

grid-area

Grid-area, which specifies the project placement area.

It can be evaluated in two ways:

  • Grid-row-start, grid-column-start, grid-row-end, grid-column-end

    grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
Copy the code

  • Area:

    grid-area: <name>;
Copy the code

*-self

justify-self & align-self

Sequence-self/align-self works just as well as sequence-items/align-items, except that the sequence-items function applies only to a single item.

Again, I’ll show you some common attributes:

  • start

  • end

  • center

  • stretch

place-self

Place-self is a combination of align-self and context-self.

place-self: <align-self> <justify-self>;
Copy the code

If the second value is ignored, the two values are equal.

Old drivers learn CSS again

  • The box model
  • Flex
  • What is BFC & IFC
  • Grid