CSS Grid - Gilian/003-CSS-Grid GitHub Wiki

CSS-Grid: A Cheatsheet / The most important aspects

Here i like to collect the most basic stuff you need to understand to use CSS-grid and get started

display: grid / inline-grid: Let you use grid, enables grid
grid-template-columns: Takes values to represent the columns for the explicit grid
- Example: 100px 1fr 100px
grid-template-rows: Takes values to represent the rows for the explicit grid
grid-auto-rows: Takes values to represent the rows for the implicit grid
- Example: 500px, Bug: One value only
grid-auto-columns: Takes values to represent the rows for the implicit grid
grid-auto-flow: Takes not explicitly positioned elements and positions them row or column first
- Example: row / column
grid-template-areas: Defines a template for the areas. Input is like spoken language "left content right"
- Example: "sidebar content sidebar2", use multiple rows and tabs to indent it into a cluster
- Every line needs to start and end with quotation marks
grid-auto-flow [dense]: Changes the position of items and is used to fill gaps with maybe smaller columns that would fit, if available

One important aspect here is, that if you have more rows or columns than you have defined the rest will become implictly defined

grid-column & grid-row: Redefines the space this item needs
- Examples: span 2, 2 / 3, span 2 / -1), here -1 counts from the end
- Shorthand for: grid-column-start or grid-column-end vice versa
grid-area: Defines the area place for this item
- Here you just say give a name defined in the grid-template-area
order [0]: Orders the items by numerical values

Parent: justify content / align content [start]: place-rows/cols stretch, center, end, space-around, space-between
Parent: justify item / align item / shortcut -> place-items [stretch]: centers, start, end the item
Child: justify self / align self: Positions the text inside and overwrite the more global set item property

Note: justfiy is for the x-axis and align for the y-axis

fr - You can use 1fr oder 2fr etc. to say "Xth of all parts"
auto - Will take up the space determined by the content
% - Will take the space in % but it fill automatically add the gap so you can get horizontal scrolling
px, em etc. - as you expect

repeat(times, what) - Example: grid-template-column: repeat(4, 1fr) or repeat(4, 1fr 2fr)
autofit & autofill - Used to handle wrapping when using "repeat"
- auto-fit - Will try to take up all the space and distribute it between the cols
- auto-fill - Will create more cols when the needed space is available but they can be empty
minmax - Takes in the minimum and maximum value so the column doesn't become to narrow.
- Most common is: repeat(150px, 1fr)