Grid Flashcards
In a nutshell, what is the difference between flexbox and grid?
Flex box is for alignment
Grid is for layout
Set a container to grid
set a container to grid inline (even if it’s block)
What’s the difference
display: grid
display: inline-grid
Inline grid is inline. It also doesn’t make the grid container auto fill the horizontal space. It is the size of the items.
define 2 columns and 2 rows to place 4 grid items
define 3 columns and 2 rows to place 4 grid items
What will happen with the missing item?
.container {
display: grid;
grid-template-columns: 50px 50px;
grid-template-rows: 50px 50px;
}
.container {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px;
}
The last grid item just isn’t fill in
Shorthand for grids and rows
forward slash
.container {
display: grid;
grid-template: 50px 50px / 50px 50px 50px;
}With:
.container {
display: grid;
grid-template-columns: 50px 50px;
grid-template-rows: 50px 50px;
}
what happens with the 5th item?Looks like:
Item 1 Item 2
Item 3 Item 4
Item 5
It’s still added to the grid, but those grid items have undefined height. The width doesn’t disturb the set width
IF the height is set. It follows overflow rules.
Control whether the overflow goes down or to the right
Down
grid-auto-flow: row;
Right
grid-auto-flow: column;
Add a gap between columns
Add a gap between rows
Shorthand for both
row-gap: 40px
column-gap: 10px
gap: row col
gap: 40px 10px
What is an implicit vs explicit grid
explicit is when you have enough items defined.
Implicit when it automatically creates rows or columns for extra items for undefined space.
How to distinguish implicitly and explicitly created rows in dev tools?
explicit dashed and more solid
implicit dotted
How to view grid in browser
under layout> grid overlays> select the grid containers.
How are grid items auomatically named/numbered?
They are not. The lines are numbered.
Far left line is 1 and they increase from there.
AND
Far right line is -1 and decreases to the left
Create a custom name for a grid line
.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
Create multiple custom names for the same grid line
.container {
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}
Repeat grid template setup
.container {
grid-template-columns: repeat(3, 20px [col-start]);
}
Which is equivalent to this:
.container {
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}
Grid terms: grid container grid item grid line grid cell grid track grid area
grid container- The element on which display: grid is applied. It’s the direct parent of all the grid items. In this example container is the grid container.
grid item- The children (i.e. direct descendants) of the grid container. 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”) and reside on either side of a row or column.
grid cell -The space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid. Here’s the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.
grid track- The space between two adjacent grid lines. You can think of them as the columns or rows of the grid. Here’s the grid track between the second and third-row grid lines.
grid area- Multiple cells. The total space surrounded by four grid lines. A grid area may be composed of any number of grid cells.
difference between grid cell and grid item?
item is the item. The children (i.e. direct descendants) of the grid container.
cell is the space. The item may not take up all the spacee
Define the start and end points for an item on a grid
grid-column-start: 1; grid-column-end: 6; What happens if the start is after the end? grid-row-start: 4; grid-row-end: 1; (scroll down)
Doesn’t matter. The grid area just becomes in between those 2 grid lines
Shorthand for either grid-column-start: 1; grid-column-end: 6; or grid-row-start: 1; grid-row-end: 4;
grid-column: 1 / 6;
grid-row: 1 / 4
Shorthand for everything: grid-column-start: 1; grid-column-end: 6; grid-row-start: 1; grid-row-end: 3;
grid-area: row / col / row / col
grid-area: 1 / 1 / 3 / 6;
Name a specific area that you can then assign items to
Name the areas with “grid-template-areas”:
grid-template: 40px 40px 40px 40px 40px / 40px 40px 40px 40px 40px;
grid-template-areas:
“living-room living-room living-room living-room living-room”
“living-room living-room living-room living-room living-room”
“bedroom bedroom bathroom kitchen kitchen”
“bedroom bedroom bathroom kitchen kitchen”
“closet closet bathroom kitchen kitchen”
}
Assign the area
#living-room {
grid-area: living-room;
}
Indicate an empty cell with grid-template areas
with a .
“living-room . living-room living-room living-room”
What are the two difference uses for “grid-area”
1. as a shorthand on grid items for: grid-column-start grid-column-end grid-row-start grid-row-end: 2. on grid items to refer to named areas that were set with grid-template-areas
Make a grid item take up a CERTAIN NUMBER of rows or columns (not just in between certain rows and columns)
grid-row-start: 1
grid-row-end: span 2
grid-row-start: span 2 (extends back from end)
grid-row-end: 3
Control the order of items in a grid
order on grid items order: 0 or 1 or -1 the lower the number, the closer to top left they are (?).
how do fr units work with grid?
They fill the space
if two elements are set to 1fr and 3fr respectively, the space is divided into 4 equal shares; the first element occupies 1/4 and the second element 3/4 of any leftover space.
If other units are present they split the remaining space.
What happens if a grid cell is expected to shrink beyond the size of the grid item?
The cell doesn’t shrink. As you shrink you can have cells with the same fr value and different actual sizes.
control the min and max size of a track (only works for a grid container)
control the min and max size of a track (anywhere)
minmax()- defines a maximum size and a minimum size. Only takes 2 arguments
clamp(minimum-size, ideal-size, maximum-size)
The cell will be the ideal-size. Unless the ideal size is greater or lesser that the minimum size.
With static px values clamp(2px, 500px, 1000px) it will always be 500px.
If ideal-size is variable clamp(200px, 50%, 500px) it will always be 50%. Until that actual px is greater or lesser than the minimum-size or maximum-size.
Make grid-cells wrap to next line when the size of the window shrinks
auto-fit in a repeat function.
grid-template-columns: repeat(auto-fit, 200px);
use with minmax() for best results (make them fill the frame and wrap):
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
What’s the difference between auto-fit and auto-fill?
auto-fill FILLS the row with as many columns as it can fit. So it creates implicit columns whenever a new column can fit, because it’s trying to FILL the row with as many columns as it can. The newly added columns can and may be empty, but they will still occupy a designated space in the row.
auto-fit FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space. The browser does that after FILLING that extra space with extra columns (as with auto-fill ) and then collapsing the empty ones.
sdf
dfs
