This is the fourth day of my participation in the August More text Challenge. For details, see:August is more challenging

Complete guide # flight.archives003

Preface: After writing this article, I’m ready to go all the way, including the flight sections, and see the road ahead. I want to do the most simple and efficient front-end tutorial // express the most arrogant personality

In March 2017, major browsers updated their support for the Grid. This is the most powerful CSS layout scheme. It divides web pages into grids and makes a variety of layouts. What was previously only possible with sophisticated CSS frameworks is now built into the browser.

Introduction to the Tag/Grid layout

.container{
    display:grid; /*or inline-grid*/
}
Copy the code

The container element is the Grid container, and the direct child of the. Container element is the Grid project. The dividing Line of the Grid is called Grid Line, and the interval between two adjacent Grid lines is called Grid Track. A single Grid is called a Grid Cell, and a block surrounded by multiple Grid lines is called a Grid Area

Tag/Grid Container properties

attribute Value for role
display grid.inline-grid Specifies a block/inline Grid container
grid-template-columns.grid-template-rows Multiple values,[line-name] <track-size>...(Names of grid lines, widths of spacing) Specify the name and size of each row/column, see Details
grid-template-areas Multiple values,<grid-area-name>(block name) or.(Empty block) Specify the name of each block. See Details
grid-template <grid-template-rows> <grid-template-columns> for<grid-template-rows>.<grid-template-columns> 和 <grid-template-areas>The CSS shorthand property
column-gap(the formergrid-column-gap),row-gap(the formergrid-row-gap) <line-size>(Width of grid line) Specifies row/column spacing
gap(the formergrid-gap) <grid-row-gap> <grid-column-gap> forrow-gapandcolumn-gapThe CSS shorthand property
align-items.justify-items start.end.center.stretch(Default) align-itemsSpecifies the line alignment of the item,justify-itemsSpecifies column alignment for the item
place-items <align-items> <justify-items> CSS shorthand for property, specifying both properties if there is only one value
justify-content.align-content start.end.center.stretch.space-around.space-between.space-evenly justify-contentSpecifies the horizontal position of the item in the container,align-contentSpecifies the vertical position of the item in the container
place-content <align-content> <justify-content> CSS shorthand for property, specifying both properties if there is only one value
grid-auto-columns.grid-auto-rows Multiple values,<track-size> Specifies the column width and row height of the excess grid that the browser automatically creates when there are excess blocks
grid-auto-flow row.column.row dense.column dense Specifies the order in which items are placed. The default isrowThat is, “first, second.”
grid <grid-template>.<'grid-template-rows'> [ auto-flow && dense? ] <'grid-auto-columns'>.[ auto-flow && dense? ] <'grid-auto-rows'>? <'grid-template-columns'> grid-template-rows.grid-template-columns.grid-template-areas.grid-auto-rows.grid-auto-columns 和 grid-auto-flowThe CSS shorthand property, see Details

Tag/Grid Item attribute

attribute Value for role
grid-column-start.grid-column-end.grid-row-start.grid-row-end <line>.span <number>.span <name> Specify the Grid Area that the project occupies. See Details
grid-column.grid-row <start-line> / <end-line> grid-columnisgrid-column-startandgrid-column-endThe CSS shorthand property,grid-rowisgrid-row-startandgrid-row-endThe CSS shorthand property
grid-area <name>.<row-start> / <column-start> / <row-end> / <column-end> Specify the project area
justify-self.align-self start.end.center.stretch justify-selfSpecifies the horizontal position of the item in the block,align-selfSpecifies the vertical position of the item in the block,
place-self auto(Default value),<align-self> <justify-self> <align-self>.<justify-self>Or specify both properties if there is only one value

->> Details

Container properties –grid-template-columns.grid-template-rows

Value:

grid-template-columns: 100px 1fr; */ grid-template- Columns: [linename] 100px; [linenameA linenameB] 100px [linenameB linenameB] 100px [linenameB linenameB] 100px [linenameB linenameB] 100px; Columns: [linenameA linenameB]; columns: [linenameB linenameB]; /* You can define only the name, but not the size */Copy the code

Special content introduction:

  1. Repeat () function

    The CSS function repeat(times, value) can simplify the cumbersome input of repeated values

    .container {
    display: grid;
    grid-template-columns: repeat(4.25%); /* Template-columns: columns... * /
    grid-template-rows: repeat(2.50px 100px 80px); /* Equates to grid-template-columns: 50px 100px 80px 50px 100px 80px; * /
}
Copy the code

    Special note: The Times parameter accepts the auto-fill and auto-fit keywords and is applicable when the container size is not fixed

    Grid-template-columns: repeat(auto-fill, 100px) /* Place 100px items in a row until the row is filled */Copy the code
    • auto-fillRepresents an automatic determination of the number of repeats to populate each row/column with as many items as possible
    • auto-fitRepresents an automatic determination of the number of repeats to fill as much space as possible in each row/column

    In the case of variables such as the minmax() function, the two may behave differently. Demo: codepen. IO/flightmaker…

  2. The length unit fr” fr” is short for “Fraction “(” fragment “) and can be used to specify width ratios

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

    Fr units can be used with absolute units. The above code specifies that the first line is 200px and the second line is half the width of the third line

  3. A keyword used to control size

    • min-contentAllocation minimum width
    • max-contentAllocate maximum width
    • fit-contentThe width of the allocation ismin-content 和 max-contentbetween
    • autoAutomatic width allocation

  4. The size control function minmax(min, Max) takes two arguments, representing a length range, indicating a width not less than min but not more than Max. If you define only one, you can use the min() and Max () functions

Container properties –grid-template-areas

Value:

/*<string>+*/ grid-template-areas: "a a a" "b c c"; /* Grid -template-areas */ Grid -template-areas: "a a." "b c c"; You can specify a block as empty */Copy the code

Project Attributes –grid

Value:

/*<'grid-template'> (grid-template-columns and grid-template-rows) */ Grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px, max-content) "b" 20%; /* <'grid-template-rows'> / [ auto-flow && dense? ]  <'grid-auto-columns'> */ grid: 200px / auto-flow; grid: 30% / auto-flow dense; grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; /* [ auto-flow && dense? ]  <'grid-auto-rows'>? / <'grid-template-columns'>*/ grid: auto-flow / 200px; grid: auto-flow dense / 30%; grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); grid: auto-flow dense 40% / [line1] minmax(20em, max-content);Copy the code

This property has a negative impact on the legibility of the code.

->> Reference link

MDN Chinese document developer.mozilla.org/zh-CN/docs/…

MDN English document developer.mozilla.org/en-US/docs/…

CodingStartUp www.bilibili.com/video/BV1XE…

CSS – Tricks css-tricks.com/snippets/cs… Comparison of auto-fill and auto-fit attributes css-tricks.com/auto-sizing…

Pausing. Io# 1 pausing. IO/tutorials/d… Pausing. Io# 2 pausing. IO/tutorials/g…

->> Version History

Now in V1.0 see Github(@FlightMakers)

Release of V1.0 in JJ on 2021.8.13

On August 14, 2021.8.14, Mo fought yu for two days!! This article has finally been posted QwQ!!