Grid

.page-grid {
  display: grid;
  grid-template-columns: max-content;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  min-height: 100%;
}

header {
  grid-area: header;
}

aside {
  grid-area: sidebar;
}

main {
  grid-area: content;
}

footer {
  grid-area: footer;
}

Grid Container

display: grid - set grid

grid-template-columns - sets the number of columns in the grid and the width of each column

• auto - sets the column width to the width of its content
• 50px 50px - 2 columns, 50px each
• 1fr 1fr - 2 columns, 1 fraction out of all fractions each. in this case there are 2 fractions in total, so both columns will take 50%
• minmax(40px, 200px) - set the range for the width of column. it will adjust when the grid container changes size. is used in pair with repeat()
• repeat(4, 100px) - 4 columns, 100px each. auto-fill & auto-fit can be used with this option
• auto-fill & auto-fit - allow to insert as many rows or columns of desired size as possible, depending on the size of container
• e.g.
• grid-template-columns: repeat(2, minmax(0, 1fr)); - two columns of same width
• grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); - all items keep stretching on resize, until new one 60px column can be inserted

grid-template-rows - analog of grid-template-columns, used for rows

• e.g. grid-template-rows: 1fr auto; - first row grows, second has the height of its content

grid-template-areas - allows to group grid items into an areas and give each area a custom name

• . - mark empty cell

gap - adds space between grid items

• 8px 16px - space between rows + space between columns
• this is a shorthand for:
• row-gap
• column-gap
• grid-gap - is a legacy name for this property. backward compatibility is preserved

align-content - vertical alignment of items within grid container

• start, center, end
• stretch
• space-around, space-between, space-evenly

justify-content - horizontal alignment of items within grid container

• start, center, end
• stretch
• space-around, space-between, space-evenly

place-content - is a shorthand for align-content and justify-content

• e.g. place-content: center space-between;

align-items - vertical alignment of each item within its row

• start / center / end
• stretch

justify-items - horizontal alignment of each item within its column

• start, center, end
• stretch

place-items - is a shorthand for align-items and justify-items

grid-auto-columns
grid-auto-flow
grid-auto-rows

grid - is a shorthand for:

• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-template-areas
• grid-template-columns
• grid-template-rows

Grid Items

grid-row - sets the amount of rows an item will consume

grid-column - sets the amount of columns an item will consume

• 2 / 4 - from column 2 to 4, not including 4

grid-area - sets the area, grid item belongs to

• <string area> - the one described in grid-template-areas
• e.g. grid-area: sidebar;
• <grid-row-start> <grid-column-start> <grid-row-end> <grid-column-end> - a shorthand for grid-row and grid-column
• e.g. grid-area: 1 / 1 / 2 / 4; - 3 cells on the first row
• if multiple grid items belong to the same area, they overflow each other

align-self - vertical alignment of individual item within its row

• stretch
• start, center, end

justify-self - horizontal alignment of individual item within its column

• stretch - default
• start, center, end

place-self - is a shorthand for align-self and justify-self

• tricks:
• by default a grid item cannot be smaller than the size of its content. "min-width: auto" & "min-height: 0" - are set by default
• this behaviour can be overridden with "min-width: 0" or overflow other than visible

order - allows to set custom order of grid items. by default, items are lying according to the order of elements in layout

• 0 - default value
• <positive number>
• <negative number>