https://github.com/luisvalgoi/css-grid-playground
Repository dedicated to learn more about CSS Grid
https://github.com/luisvalgoi/css-grid-playground
box-model css grid grid-system
Last synced: 27 days ago
JSON representation
Repository dedicated to learn more about CSS Grid
- Host: GitHub
- URL: https://github.com/luisvalgoi/css-grid-playground
- Owner: LuisValgoi
- Created: 2021-07-22T03:00:24.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-22T03:06:32.000Z (almost 5 years ago)
- Last Synced: 2025-10-29T15:39:11.670Z (7 months ago)
- Topics: box-model, css, grid, grid-system
- Language: JavaScript
- Homepage: https://css-grid-playground.netlify.app
- Size: 216 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Repo Goal
To learn more about CSS Grid.
It was used [this](https://www.youtube.com/watch?v=HN1UjzRSdBk&ab_channel=Rocketseat) tutorial as reference.
# Status
[](https://app.netlify.com/sites/css-grid-playground/deploys)
# Grid Motivation
- RAW HTML Renders elements all below each others.
- In the very beggining `float` and `table` came up to try to solve.
- They did. Partially.
- But, another better approach came up: Flexbox.
- It has changed the way elements structure were organized.
- Axis `x` and `y` could provide a bunch of flexibility that before we couldn't.
- But it wasn't enough. It was onedimensional. Then, CSS Grid have arrived.
- It basically create a 2D (bi-dimensional) approach. With rows and columns.
# Grid vs Flexbox
- one fills the gap of others.
- `GRIDs`: works for the layout limits. Page structure.
- `FLEXBOXEs`: works for the elements itself. Components structure.
# Notes
- `1fr`: means 1 Flex. 1 fraction.
- `vh`: means viewport height.
- `gridGap`: 20px stands for `grid-row-gap`: 20px and `grid-column-gap`: 20px.
- `grid--`: will depend on the virtual lines of your structure. The amount changes according to how much columns/rows you want.
- lets say you have a 2 columns grid.
- you will have 3 slots where you can start or end your grid-item.
- `grid-: 3/4` its the same as the `grid--start: 3` + `grid--end:4`. Take a look into the 1st example.
- `grid-template-areas`: shortcut for all the `grid--`. Take a look into the 2nd example.
# Properties
### Containers
- `display: grid`: says that its a grid.
- `grid-template-columns`: says how many columns my container will have.
- `grid-template-rows`: says how many rows my container will have.
- `grid-template-areas`: .
- `grid-gap`: says about the spacing/gaps on:
- `grid-column-gap`: says about the spacing on the column.
- `grid-row-gap`: says about the spacing on the row.
### Items
- `grid-column`: says about where the item will be placed on the column.
- `grid-column-start`: its the verbose way to write. it represents where te item will start on your columns virtual lines.
- `grid-column-end`: its the verbose way to write. it represents where te item will ends on your columns virtual lines.
- `grid-row`: says about where the item will be placed on the row.
- `grid-row-start`:its the verbose way to write. it represents where te item will start on your rows virtual lines.
- `grid-row-end`: its the verbose way to write. it represents where te item will ends on your rows virtual lines.
- `grid-area`: says about where the item will be placed on the area. (applicable only with `grid-template-areas`).