Grid reference
Here are all the different grid declarations:
Properties for grid containers.
grid-template-columnsgrid-template-rowsgrid-template
grid-template is the shorthand combining both rows and columns. Rows are defined first the a forward slash / separates the columns.grid-template: 80vw 10vw auto / repeat(8, 1fr);
grid-template-columns: max-content auto; First col is the width of the biggest element. Second col automatically fills the rest of the space.
display:griddisplay:inline-grid
Essential first property.
inline-grid means the container behaves like inline-block. It will only stretch out as wide as it needs too
grid-template-areas
If a grid item has been given a name using the grid-area property then it can be used here.
justify-contentstartcenterendspace-aroundspace-betweenspace-evenly
This works when the width of all the grid-columns combined is less than the width of the container.
justify-itemsstartcenterendThis aligns items horizontally (assuming grid-auto-flow: row; within their grid column.
align-content
Similar to above but for vertical alignment. Same values as for justify-content:
startcenterendspace-aroundspace-betweenspace-evenly
NB. This will only work if the height of the grid container is larger than the sum of of the height of the grid rows. So this implies the grid container will have it’s height defined AND the height of the grid items is less than this height.
grid-auto-columnsgrid-auto-rows
auto the default. Size of columns is determined by the size of the container.
fit-content() trys to fit all of the content in without wrapping but only up to the size defined in the brackets. It's like max-content but with an upper limit to how far it can grow.
max-content Sets the size of each column depending on the largest item in the column. A single sentence or paragraph will be as long as it can without a line break.
min-content Sets the size of each column depending on the smallest item in the column. This could a longest single word or an image or any fixed-width (or height) object.
minmax(100px, 200px)
units ie. px, ems, ens etc.
% percentage value
1fr will make the columns or rows the same size.
grid-auto-flowWhen grid items fall beyond the implicit grid new rows are created, the number of columns stays the same. This is the default value:
grid-auto-flow: row
grid-auto-flow: column does the opposite, so that new columns are added and the number of rows stay the same. This makes a grid layout similar to flexbox. Might want to combine with grid-auto-columns: 1fr to keep them the same width.
grid-auto-flow: dense is probably the most useful. Grid items of of different sizes can cause some grid spaces to be empty. This setting tries to correct by changing the natural (html) order to fill up the empty spaces.
Properties for grid items
align-self
Aligns an item vertically in it's grid area.
The default is stretch
Other values are: start, end and center
justify-self
Aligns an item horizontally in it's grid area.
The default is stretch
Other values are: start, end and center
place-self
Combines align-self with justify-self taking two values (align-self first).
The default values are: stretch stretch
place-self: start center place the item top center.
grid-column
Which columns a grid item should span:
grid-column: span 3;
grid-column: 1 / -1; from the first track to last track
grid-column: 2 / span 2; from the second track to the fourth track
grid-row
Which rows a grid item should span:
grid-row: span 3;
grid-row: 1 / -1; from the first track to last track
grid-area
Commonly used with grid-template-areas:
grid-area: header;
grid-area: span 3; from the first track to last track
View the CSS for this page
.ref-1 {
display:grid;
grid-template-columns: auto 1fr;
grid-gap: 5px;
background: rgb(224, 247, 224);
font-size: 1.1rem;
}
.ref-1>div,
.ref-1>h2 {
background: var(--container-bg);
}
.ref-1>div {
padding: .5em 0 1.2em .5em;
}
.ref-1 p:first-of-type {
margin: 0;
}
.ref-1 h2 {
grid-column: 1 / -1;
}