CSS Layout is the foundation of every website. In the past, we used tables or float
for layouts, but today we have two powerful and modern technologies: Flexbox and
Grid.
Flexbox (Flexible Box Layout) is ideal for one-dimensional layouts – either in a row (horizontal) or a column (vertical). It allows easy alignment of elements, distribution of space between them, and resizing. Perfect for navigation bars, cards, button groups, and smaller components.
Grid (CSS Grid Layout) is a more powerful tool for two-dimensional layouts – managing both rows and columns simultaneously. It enables the creation of complex, complete page structures (header, sidebar, main, footer) with precise control over every part of the grid. Grid is excellent for the overall structure of a website.
In this tutorial, we will cover both technologies, their properties, and how to use them in practice. By the end, you will be able to create any layout that is responsive and adaptable to all devices.
| Property | Example | Description |
|---|---|---|
| Flexbox: Container | ||
display: flex; | display: flex; |
Activates Flexbox for the container |
flex-direction | flex-direction: row; |
Direction of layout (row, row-reverse, column, column-reverse) |
justify-content | justify-content: center; |
Alignment along the main axis (left, right, center, space-between) |
align-items | align-items: center; |
Alignment along the cross axis (top, bottom, center, stretch) |
flex-wrap | flex-wrap: wrap; |
Whether elements should wrap to a new line (nowrap, wrap, wrap-reverse) |
gap | gap: 20px; |
Space between elements |
| Flexbox: Individual Items | ||
flex | flex: 1; |
Shorthand for grow, shrink, basis |
flex-grow | flex-grow: 1; |
How much the item should grow relative to remaining space |
flex-shrink | flex-shrink: 1; |
How much the item should shrink if there is not enough space |
align-self | align-self: flex-end; |
Overrides align-items for a specific item |
| Grid: Container | ||
display: grid; | display: grid; |
Activates Grid for the container |
grid-template-columns | grid-template-columns: 1fr 1fr 1fr; |
Defines the number and size of columns (1fr = one fraction) |
grid-template-rows | grid-template-rows: 100px auto; |
Defines the number and size of rows |
grid-template-areas | grid-template-areas: "header header" "sidebar main"; |
Naming areas for easier layout |
gap | gap: 20px; |
Space between rows and columns |
justify-items | justify-items: center; |
Alignment of content within cells (all cells) |
align-items | align-items: stretch; |
Alignment of content within cells (all cells) |
justify-content | justify-content: space-around; |
Alignment of the entire grid within the container |
| Grid: Individual Items | ||
grid-column | grid-column: 1 / 3; |
Places the item from column 1 to 3 |
grid-row | grid-row: 1 / span 2; |
Places the item from row 1, spanning 2 rows |
grid-area | grid-area: header; |
Places the item in a named area |
justify-self | justify-self: end; |
Overrides justify-items for a specific item |
