markdown CSS网格

Posted 2021-05-05

### Creating the Grid Container
* `display: grid`
  * You can also use `grid-inline`
  * All direct children of grid containers become **grid items**
  * By default grid items are placed in **rows** and span the full width of the grid container!
* You can **explicitly** create grids with rows and columns using:
  * `grid-template-rows: 50px 100px`: row 1 has fixed **height** of 50px and row 2 will have a fixed height of
  100px, all other rows will have heights defined by their content.
  * `grid-template-columns: 90px 50px 120px`: creates 3 columns of **width** 90px, 50px and 120px
  * You can use a unitless, flexible unit called `fr`
    * `grid-template-columns: 1fr 1fr 2fr`: 3 columns with the last column twice the width of the first 2.
* Set the height or width of the size of the grid by using the `minmax()` function.
  * `grid-template-rows: minmax(100px, auto);`: first arg is the minimum size, second arg is the max size
  * `auto` allows the size of the grid item to grow based on the size of the content.
* Use the `repeat()` function to repeat grid style:
  * `grid-template-rows: repeat(4, 100px);`
  * `grid-template-columns: repeat(3, 1fr);`
  * This produces a grid system of 4 rows each of 100px in height and 3 columns with equal width of the container.
  * **Remember**: you can specify any number of columns 
* Shortcut to specifying number of columns and grids: `grid-template: rows / columns`
  * `grid-template: repeat(2, 50px) / repeat(3, 1fr)`
* Use `-gap` to produce spacing between grid items:
  * `grid-row-gap: 20px;`
  * `grid-column-gap: 5rem;`
  * only provide gap between columns and rows, NOT ALONG THE EDGE OF THE CONTAINER
  * `grid-gap: 100px 1em`: shorthand notation for `grid-row-gap: 100px; grid-column-gap: 1em;`
  
---
## Positioning Items in the Grid
### Spanning horizontally:
* `grid-column-start: 1`
* `grid-column-end: -1`
* Shorthand: `grid-column: 1 / -1`
* `-1` specifies span all the way down to the last column. Otherwise you can specify a # of columns to span
* 2 columns = 3 column lines: `| 1 | 2 |`
### Spanning vertically:
* Before you begin, make sure there is space available for the element to span up or down!
* `grid-row: start / end`
* 3 rows = 4 row lines 
* `auto-fit` will allow more elements to occupy the row as the browser width increases and removes them on to a new row when 
the browser width decreases
* `grid-auto-rows` will allow you to the height of all rows that are shown when resizing the browser 
(whose row heights weren't set using `grid-template-row`)
  * Then, you can remove `grid-template-row`, so to implicitly set the heights of all rows!
  * You can also span vertically using: `span 2` for ex.
  * A starting value of `auto` will let the element start from the position it is currently in!
* `grid-auto-flow` will compact your elements to fill in empty spaces that are created when using different span lengths and widths
  * options include: `dense`: more compact algorithm (fills in better than using `row`) 
---
## Alternate to Positioning
* You can define a `grid-template-areas`: which is a visual string that depicts how the elements are displayed in the grid
* For example"
```javascript
grid-template-areas: 
	"h h h h h h h h h h h h"
	"m c c c c c c c c c c c"
	"f f f f f f f f f f f f";
	
.header {
	grid-area: h;
}

.menu {
	grid-area: m;
}

.content {
	grid-area: c;
}

.footer {
	grid-area: f;
}
```