Overview
The grid layout (display:grid) is defined through grid-template-rows and grid-template-columns, which have the default value none. This is where the most confusing setup is, as it allows many ways of specifying the dimensions along the axes. The grid can be conceptualized as having "tracks" in the horizontal and vertical directions.
- length values as
px,em,%, etc... - fractions as
1fr,2fr, which are "a fraction of the available areas" - auto which adjust by "content size" as determined by the items themselves
special
- content-based
min-contentto shrink to smallest,max-contentto scale to largest,fit-content()to limit size - minxmax which defines a range of any of the above values
repeat - used to maintain or collapse tracks that are empty. auto-fit and auto-fill are dependent keywords
- explicit repeat -
repeat(3,1fr)creates multiple units - auto-fit -
repeat(auto-fit,minmax(150px,1fr))to stuff as many tracks as declared and stretching to fill empty space. Theminmaxuse provides the expand-to-fit behavior. shrinks to avoid overflow. - auto-fill -
repeat(auto-fill,minmax(150px,1fr))to stuff as many tracks without changing the sizing. Overflows. Use ofminmax()is not mandaory
Default Values
.container {
display: grid; /* Grid container */
grid-template-rows: none; /* No explicit row definition */
grid-template-columns: none; /* No explicit column definition */
grid-template-areas: none; /* No named grid areas */
grid-auto-rows: auto; /* Implicit rows adjust to content */
grid-auto-columns: auto; /* Implicit columns adjust to content */
grid-auto-flow: row; /* Items placed row-wise by default */
gap: 0; /* No spacing between tracks */
}
.item {
grid-row: auto; /* Default row placement */
grid-column: auto; /* Default column placement */
grid-area: auto / auto / auto / auto; /* Default area placement */
justify-self: stretch; /* Stretch to fill grid cell horizontally */
align-self: stretch; /* Stretch to fill grid cell vertically */
}resources: gridbyexample, guide to css grid
The Basic Screen Sized Grid
This defines a 4-element gridded layout, with a full-width header and footer stacked on top of a left/right element.
<!-- HTML for 4-element screen-size grid -->
<div class='fullScreenGrid'>
<div class='header' />
<div class='left'/>
<div class='right'/>
<div class='footer'/>
</div>/* CSS fpr 4-element screen-size grid */
.fullScreenGrid {
display: 'grid';
width: '100vw';
height: '100vh';
grid-template-rows: 'auto 1fr auto'; /* 3 rows */
grid-template-columns: '50% auto'; /* 2 cols */
}
.header, .footer {
grid-column: 1 / 3;
}
.left {
grid-column: 2 / 3;
}
.right {
grid-column: 1 / 2;
}
Setting up the parent grid consists of defining the size of the grid using width and height, then specifying the number of grid units per row and column.
width, height
For a full-screen app, use 100vw and 100vh
grid-template-row
Layout sizing rules for row. auto 1fr auto would set three rows, with the sizing "size to fit content" on top and bottom, and the middle taking up the 1 fractional unit out of 3.
grid-template-columns
Layout sizing rules for column. 50% auto would set two columns, with the leftmost column set to 50% with and the right taking up whatever remains (also 50%).
The child items of the CSS Grid will be placed within the boundaries of the edges defined by the number of rows and columns (e.g. two elements side by side hae three edges: left, middle, right).
The Grid layout algorithm will put one child per grid unit unless the child item specifies its size:
grid-rows
The start / end grid edge of the row. There are N+1 edges for N rows, with the leftmost edge as 1.
grid-columns
The start / end grid edge of the column. There are N+1 edges for N columns, with the topmost edge as 1.
Things to Notice
- There are no multi-row spans so the child items do not use
grid-rows. - The header and footer span across all three columns; this is
grid-columns: 1 / 3. - The middle row contains a left and right grid cell defined with
grid-columns: 1 / 2and2 / 3respectively.
Grids Inside of Grids
...