CSS Grid Flashcards
How to make any element into a css grid?
display: grid;
grid-template-columns:
a property that indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.
grid-template-rows:
used to adjust the amount and width of rows
CSS Grid units:
fr: sets the column or row to a fraction of the available space.
auto: sets the column or row to the width or height of its content automatically
%: adjusts the column or row to the percent width of its container
grid-column-gap:
Used to add gaps between columns.
grid-row-gap:
Used to add gaps in between rows.
grid-gap
Short hand for grid-row/column-gap. If grid-gap has one value it will create a gap between all rows and columns; if there are two values, it will use the first one to set gaps for the rows and the second for columns.
grid-column:
a property used to control the amount of columns an item will consume.
(ex: grid column: 1 / 3;
this will make the item start at the first vertical line on the lift and span to the third, consuming two columns.)
grid-row:
a property used to control the amount of rows an item will consume.
justify-self:
A property used to align the content’s position within a cell, horizontally.
justify-self: start;
aligns the content at the left of the cell.
justify-self: stretch;
will make the content fill the whole width of the cell.
justify-self: center;
aligns the content in the center of the cell.
justify-self: end;
aligns the content at the right of the cell.
Cell
The content of each item is located in a box known as the grid.
align-self;
A property used to align the content’s position within a cell, vertically. It accepts all the same values as justify-self.
justify-items:
A property used to align ALL items at once horizontally. Accepts all the values that justify-self and align-self do.
align-items:
Similar to justify-items, it will align all items but do so vertically.
grid-template-areas:
A property that is used to group cells of your grid together into an area and give the area a custom name.
Example:
grid-template-areas:
“header header header”
“advert content content”
“footer footer footer”;
Every word in the code represents a cell and every pair of quotation marks represent a row.
You can use a period to designate and empty cell in the grid.
grid-area:
After creating an area’s template you can place an item in your custom area by referencing the name you gave it.
Example: .item1 { grid-area: header }
Use grid-area w/o creating an areas template.
If your grid doesn’t have an area template to reference you can create on on the fly, like this:
item1 { grid-area: 1/1/2/4 }
These numbers represent:
grid-area: horizontal line to start at / vertical line to start at / horizontal line to start / vertical line to start at;
grid-template-row/columns: repeat;
A function that is used to create several row/columns of the same size.
Example: grid-template-rows: repeat(100, 50px); this example would create 100 rows that are 50 px tall.
minmax
Function used for grid-template-row/columns. It’s used to limit the size of items when the grid container changes size
ex: grid-template-columns: 100px minx(50px, 200px);
In this example grid-template-columns is set to create two columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px.
repeat(auto-fill)
autofill is an option for repeat that allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of your container.
example:
repeat(auto-fill, minimal(60px, 1fr));
