Grid Flashcards
What is Grid mostly useful for?
Whereas Flexbox is mostly useful for positioning items in a one-dimensional layout, CSS grid is most useful for two-dimensional layouts, providing many tools for aligning and moving elements across both rows and columns.
Grid Container and Grid Items
The grid container will be a parent element that contains grid items as children and applies overarching styling and positioning to them.
display: grid; will create your grid container
grid-template-columns: 100px 200px;
and grid-template-rows
This property creates two changes.
First, it defines the number of columns in the grid; in this case, there are two.
Second, it sets the width of each column. The first column will be 100 pixels wide and the second column will be 200 pixels wide.
We can also define the size of our columns as a percentage of the entire grid’s width
.grid {
display: grid;
width: 1000px;
grid-template-columns: 20% 50%;
}
grid-template-rows works the same, just with rows
grid-template: 200px 300px / 20% 10% 70%;
When using grid-template, the values before the slash will determine the size of each row. The values after the slash determine the size of each column. In this example, we’ve made two rows and three columns of varying sizes.
fr relative unit
The CSS grid relative sizing unit fr is used to split rows and/or columns into proportional distances. Each fr unit is a fraction of the grid’s overall length and width. If a fixed unit is used along with fr (like pixels for example), then the fr units will only be proportional to the distance left over.
repeat function
A shortcut for specifying grid-template-columns and grid-template-rows
repeat(3, 1fr) would create three 1fr rows/columns
minmax() Function
The CSS Grid minmax() function accepts two parameters:
The first parameter is the minimum size of a row or column.
The second parameter is the maximum size.
The grid must have a variable width for the minmax() function.
The function can be used in the values of the grid-template-rows, grid-template-columns and grid-template properties.
grid-template-columns: 100px minmax(100px, 500px) 100px;
grid-row-gap
The CSS grid-row-gap property determines the amount of blank space between each row in a CSS grid layout or in other words, sets the size of the gap (gutter) between an element’s grid rows.
The grid-column-gap provides the same functionality for space between grid columns.
they do not add space at the beginning or end of the grid.
grid-row-start and grid-row-end
These properties can be used to make grid items take up multiple rows
grid-column-start and grid-column end do the same thing for columns
grid-row-start: 1;
grid-row-end: 3;
will take up the first two rows
grid-row: 5 / 7
grid-column: 5 / 7
Both are shorthand for the grid-row-start / grid-row-end and grid-column-start / grid-column-end
these would make an item span the rows/columns 5 and 6
grid-area: 2 / 3 / 4 / span 5;
Shorthand for
grid-row-start: 2
grid-column-start: 3
grid-row-end: 4
grid-column-end: span 5
the item will occupy rows two and three and columns three through eight.
grid-template-areas
The CSS grid-template-areas property allows the naming of sections of a webpage to use as values in the grid-row-start, grid-row-end, grid-column-start, grid-column-end, and grid-area properties. They specify named grid areas within a CSS grid.
...
grid-template-areas: "head head"
"nav nav"
"info services"
"footer footer";
grid-template-rows: 300px 120px 800px 120px;
grid-template-columns: 1fr 3fr;
}
header {
grid-area: head;
}
makes the tag content take up the first row and both columns.
justify-items
A property that positions grid items along the inline, or row, axis. This means that it positions items from left to right across the web page. This positions them within the COLUMN
Values:
start — aligns grid items to the left side of the grid area
end — aligns grid items to the right side of the grid area
center — aligns grid items to the center of the grid area
stretch — stretches all items to fill the grid area
justify-content
Positions the ENTIRE grid/columns along the row axis.
Values:
start — aligns the grid to the left side of the grid container
end — aligns the grid to the right side of the grid container
center — centers the grid horizontally in the grid container
stretch — stretches the grid items to increase the size of the grid to expand horizontally across the container
space-around — includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element
space-between — includes an equal amount of space between grid items and no space at either end
space-evenly — places an even amount of space between grid items and at either end
align-items
A property that positions grid items along the block, or column axis. This means that it positions items from top to bottom. This positions them within the ROW
Values:
start — aligns grid items to the top side of the grid area
end — aligns grid items to the bottom side of the grid area
center — aligns grid items to the center of the grid area
stretch — stretches all items to fill the grid area
