Grid - Implicit Grid Flashcards
What is an implicit grid?
If there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid, the grid container automatically generates grid tracks by adding grid lines to the grid. The explicit grid together with these additional implicit tracks and lines forms the so called implicit grid.
Source css-tricks
What do grid-auto-columns and grid-auto-rows properties do?
Specifies the size of any auto-generated grid tracks (aka implicit grid tracks). Implicit tracks get created when there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid.
Values:
<track-size> – can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)
.container {
grid-auto-columns: <track-size> ...;
grid-auto-rows: <track-size> ...;
}
Source css-tricks
What does grid-auto-flow property do?
If you have grid items that you don’t explicitly place on the grid, the auto-placement algorithm kicks in to automatically place the items. This property controls how the auto-placement algorithm works.
Values:
-
row– default - tells the auto-placement algorithm to fill in each row in turn, adding new rows as necessary -
column– tells the auto-placement algorithm to fill in each column in turn, adding new columns as necessary -
dense– tells the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later
.container {
grid-auto-flow: row | column | row dense | column dense;
}
Note: that dense only changes the visual order of your items and might cause them to appear out of order, which is bad for accessibility.
Source css-tricks
What does grid property do?
A shorthand for setting all of the following properties in a single declaration: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.
Note: You can only specify the explicit or the implicit grid properties in a single grid declaration.
Source css-tricks
What do the sizing functions do?
The minmax() function sets a minimum and maximum value for what the length is able to be. This is useful for in combination with relative units. Like you may want a column to be only able to shrink so far.
Example:
grid-template-columns: minmax(100px, 1fr) 3fr;
The min() function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value.
The max() function lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value.
Source css-tricks
What does the repeat() function do?
The repeat() function can save some typing:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
/* easier: */ grid-template-columns: repeat(8, 1fr); /* especially when: */ grid-template-columns: repeat(8, minmax(10px, 1fr));
But repeat() can get extra fancy when combined with keywords:
-
auto-fill: Fit as many possible columns as possible on a row, even if they are empty. -
auto-fit: Fit whatever columns there are into the space. Prefer expanding columns to fill space rather than empty columns.
Source css-tricks
What does grid-template-columns: repeat(auto-fill, 100px); do?
It will create as many columns of 100px as it can possible fit in the grid without overflowing the width of the grid.
What does this css rule do grid-template-columns: repeat(auto-fit, 100px);?
It will create as many columns (tracks) of width 100px as needed depending amount of grid items.
The difference between auto-fit and auto-fill is that with auto-fit the empty tracks will colapse while with auto-fill they will be created.
Note: if a fixed number of vertical tracks is used in the repeat notation and the number of items exceeds this value more rows are added.
Source css-tricks
How can we size implicit tracks?
The grid-auto-rows and grid-auto-columns properties give us control over the size of implicit tracks.
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 100px;
grid-gap: 20px;
grid-auto-columns: 200px;
grid-auto-rows: 60px;
}
Implicit tracks will now always have a width of 200px and a height of 60px, no matter if the grid item fits or not.
You can make sized implicit tracks more flexible by specifying a range using the minmax() notation.
.grid {
grid-auto-columns: minmax(200px, auto);
grid-auto-rows: minmax(60px, auto);
}
Implicit tracks are now at least 200px wide and 60px high, but will expand if the content demands it.
Source css-tricks
What is the automatic placement of grid-items?
Implicit tracks are also added if the number of items exceeds the number of cells. By default, the auto-placement algorithm places items by filling each row consecutively, adding new rows as necessary.
Source css-tricks
How can you change how auto-placed items get flowed into the grid?
We can specify how auto-placed items get flowed into the grid by using the grid-auto-flow property.
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 100px;
grid-gap: 20px;
grid-auto-flow: column;
}
Instead of rows, columns are being filled with items and additional implicit columns are created.
Source css-tricks
How can you create a flexible grid that expands with new columns and wraps to new rows if there is no space?
You could do:
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
Note that the minimum value used here is 200px for each column. That’s just some number that you’d pick that feels good for your content. If you need to consider an alteration that allows it to go smaller if the screen itself is smaller than that wide. You could use:
grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
That’s saying that if 100% width calculates to less than 10rem (otherwise the minimum), then use that instead, making it safer for small-screen layouts.
Source css-tricks
What does this CSS declaration grid-template-columns: repeat(12, 1fr); do?
It creates a 12 columns grid layout.
The 1fr is what tells the browser to distribute the space between the columns so that each column equally gets one fraction of that space.
Source css-tricks
What is the problem with this CSS declaration grid-template-columns: repeat( 12, minmax(250px, 1fr) );?
This will cause overflow in the row. The columns will not wrap into new rows if the viewport width is too narrow to fit them all with the new minimum width requirement, because we’re explicitly telling the browser to repeat the columns 12 times per row.
To achieve wrapping, we can use the auto-fit or auto-fill keywords.
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr));
Source css-tricks
What do auto-fit or auto-fill keywords tell the browser when passed to a repeat function?
For example:
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr));
These keywords tell the browser to handle the column sizing and element wrapping for us so that the elements will wrap into rows when the width is not large enough to fit them in without any overflow.
In the example, the fraction unit used, ensures that in case the width allows for a fraction of a column to fit but not a full column, that space will instead be distributed over the column or columns that already fit, making sure we aren’t left with any empty space at the end of the row.
Source css-tricks
