https://github.com/foyez/grid
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/foyez/grid
- Owner: foyez
- Created: 2021-06-12T16:29:18.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-06-13T05:44:25.000Z (almost 4 years ago)
- Last Synced: 2025-02-05T00:31:44.386Z (4 months ago)
- Language: CSS
- Size: 206 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Grid Layout
`Grid is a two-dimensional grid-based layout system`
## Grid Terminology
### Grid Container
- The element on which `display: grid` or `display: inline-grid` is applied
- It’s the direct parent of all the grid items
```html
Item 1
Item 2
```
```css
.container {
display: grid; /* display: inline-grid */
}
```
### Grid Item
- The children (i.e. direct descendants) of the grid container
```html
Item 1
Sub item
Item 2
```
Here the item elements are grid items, but sub-item isn’t.
### Grid Line
- The dividing lines that make up the structure of the grid.
- They can be either vertical (“column grid lines”) or horizontal (“row grid lines”)
### Grid Cell
- The space between two adjacent row and two adjacent column grid lines.
- It’s a single “unit” of the grid.
### Grid Track
- the columns or rows of the grid.
### Grid Area
- A grid area may be composed of any number of grid cells.
## Grid Properties
### CONTAINER
#### `display`
- Defines the element as a grid container
```css
/* grid – generates a block-level grid */
/* inline-grid – generates an inline-level grid */
.container {
display: grid | inline-grid;
}
```
#### grid-templates: grid-templates-rows, grid-template-columns, grid-templates-areas