You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
3.0 KiB
Markdown
80 lines
3.0 KiB
Markdown
# CSS Grid
|
|
|
|
This repo houses a number of tutorials for using CSS Grid.
|
|
|
|
|
|
## Using the grid
|
|
|
|
|
|
Size can be any valid CSS unit `px`, `vw`, `auto` that enables a column or row to stretch across available space
|
|
|
|
For example `grid-template-column: 10px auto` will create a 10px column followed by a second column that fills all available space
|
|
|
|
`fr` is a fractional unit that causes any remaining space to be distributed to columns or rows based on the ratios of these units
|
|
```
|
|
grid-template-rows: 1fr 2fr
|
|
```
|
|
creates two dynamic rows with the second twice the size of the first,
|
|
```
|
|
grid-template-columns: 1fr 1fr 1fr 1fr
|
|
```
|
|
Defines four equal-sized columns
|
|
|
|
The `repeat()`function can be used to make the above less verbose `repeat(4, 1fr)`
|
|
|
|
|
|
## More complex layouts
|
|
|
|
Grids with unequal sized cells can be created by combining the different units mentioned. We can also use the `minmax()` function to define a minimum and a maximum size for dynamic columns and rows.
|
|
|
|
```
|
|
grid-template-rows: 40px 2fr repeat(2, minmax(75px, 1fr))
|
|
```
|
|
|
|
Creates four rows with the first 40px tall, the other three stretch over remaining space in a 2:1:1 ratio. The last two having a minimum height of 75px which sets the minimum height of the second row at 150px.
|
|
|
|
## Layout
|
|
|
|
### Accessing the grid
|
|
|
|
*INSERT IMAGE OF GRID LINES*
|
|
|
|
We can consider this now to be a 2 x 2 array indexed at 1 and accessible with a negative index if necessary. For example a 4 x 4 Grid will have the first column accessible at either index 1 or -5. They can be used as the boundary lines for elements placed in them.
|
|
|
|
*NOTE* We can also assign a name to index by adding a string in square brackets in the property declarations
|
|
|
|
```
|
|
gird-template-rows: [first-row] 1fr [second-row] 1fr [last]
|
|
```
|
|
|
|
### Positioning elements inside the grid
|
|
|
|
*THIS IS GONNA HAVE TO BE REWRITTEN*
|
|
|
|
Similar to flexbox, the horizontal and vertical position of items placed in the grid can be controlled by setting `justify-items` and `align-items` respectively to `start`, `center`, or `stretch`.
|
|
|
|
The same control of grid column and row positions with in a larger container (grid inside a grid) can be applied used the `justify-content` and `align-content` properties and the `start`, `center`, or `stretch` values. The additional value `space-between` or `space-around` is used to divide extra space between columns/rows. `space-evenly` can used to divide extra space evenly between columns/rows with the same or half the amount of space on the ends.
|
|
|
|
We can also define `align-content` and `justify-content`(in that order) using `place-content`. Values of `align-items` and `justify-items` can be defined with `place-items` *WTF THIS GUY CAN'T WRITE*
|
|
|
|
|
|
### Positioning items in the Grid using line numbers
|
|
|
|
To place an item in the grid we can set it's `grid-column-start` and `grid-column-end` properties between which the item should be stretched. For rows the properties are `grid-row-start` and `grid-row-end`
|
|
|
|
```
|
|
#item1 {
|
|
grid-column-start: 2;
|
|
grid-column-end: 4;
|
|
grid-row-start: 3;
|
|
grid-row-end: -1;
|
|
}
|
|
|
|
#item2 {
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
}
|
|
|
|
|
|
```
|