3 ways of building layouts
FLEXBOX
#1 What does "layout" mean?
Layout is the way text, images and other content is placed and arranged on a webpage Layout gives the page a visual structure, into which we place our content Building a layout: arrange page elements into a visual structure, instead of simply having them placed one after another (normal flow)
#2 Page layout VS. component layout
#3 The 3 ways of building layouts with CSS
- Float layout
The old way of building layouts of all sizes, using the float CSS property. Still used, but getting outdated fast.
- Flex box
Modern way of laying out elements in a 1-dimensional row without using floats. Perfect for component layouts.
- CSS GRID
For laying out elements in a fully-fledged, 2-dimensional grid. Perfect for page layouts and complex component layouts.
FLEXBOX
#1 What is FlexBox?
- Flexbox is a set of related CSS properties for building 1-dimensional layouts
- The main idea behind flexbox is that empty space inside a container element can be automatically divided by its child elements
- Flexbox makes it easy to automatically align items to another inside a parent container, both horizontally and vertically
- Flexbox solves common problems such as vertical centering and creating equal-height columns
- Flexbox is perfect for replacing floats, allowing us to write fewer and cleaner HTML and CSS code
#2 Flexbox terminology
- Flex container
- Flex items
- Main axis
- Cross axis
display: flex;
Flex container | Flex items |
---|---|
gap: 0 | <length> <br /> To create space between items, without using margin | align-self: auto | stretch | flex-start | flex-end | center | baseline <br /> To overwrite align-items for individual flex items |
justify-content: flex-start | flex-end | center | space-between | space-around | space evenly <br /> To align items along main axis (horizontally, by default) | flex-grow: 0 | <integer> <br /> To allow en element to grow (0 means no, 1+ means yes) |
align-items: stretch | flex-start | flex-end | center | baseline <br /> To align items along across axis (vertically, by default) | flex-shrink: 1 | <integer> <br /> To allow en element to shrink (0 means no, 1+ means yes) |
flex-direction: row | row-reverse | column | column-reverse <br /> To define which is the main axis | flex-basis: auto | <length> <br /> To define an item's width, instead of the width property |
flex-wrap: nowrap | wrap | wrap-reverse <br /> To allow items to wrap into a new line if they are too large | flex: 0 1 auto | <integer> <integer> <length> <br /> Recommended shorthand for flex-grow, -shrink, -basis. |
align-content: stretch | flex-start | flex-end | center | space-between | space-around <br /> Only applies when there are multiple lines (flex-wrap: wrap) |
Switching flex-direction to column With flex-direction set to column
- align-items aligns items horizontally, no longer vertically
- justify-content aligns items vertically, no longer horizontally
- gap acts like margin-bottom, no longer like margin-right
CSS GRID
#1 What is CSS Grid?
- CSS Grid is set of CSS properties for building 2-dimensional layouts
- The main idea behind CSS Grid is that we divide a container element into rows and columns that can be filled with its child elements
- In two-dimensional contexts, CSS Grid allows us to write less nested HTML and easier-to-read CSS
- CSS Grid is not meant to replace FlexBox! Instead, they work perfectly together. Need a 1D layout? Use flexbox. Need a 2D layout? Use CSS Grid.
#2 BASIC CSS GRID Terminology
- Grid container
display: grid;
- Grid items
- Row axis
- Column axis
#3 MORE CSS GRID TERMINOLOGY
- Grid lines
- Grid cells (might be filled by a grid item or not)
- Gutters (gaps)
- Grid track/row
- Grid track/column
#4 properties can be used
Grid container | Grid items |
---|---|
grid-template-rows: <track size>* <br /> grid-template-columns: <track size>* <br /> To establish the grid row and column tracks. One length unit for each track. Any unit can be used, new fr fills unused space | grid-column: <start line> / <end line> | span <number> <br /> grid-row: <start line> / <end line> | span <number> <br /> To place a grid item into a specific cell, based on line numbers. span keyword can be used to span an item across more cells |
row-gap: 0 | <length> <br /> column-gap: 0 | <length> <br /> gap: 0 | <length> <br /> To create empty space between tracks | justify-self: stretch | start | center | end <br /> align-self: stretch | start | center | end <br /> To overwrite justify-items/align-items for single items |
justify-items: stretch | start | center | end <br /> align-items: stretch | start | center | end <br /> To align items inside rows/columns(horizontally/vertically) | |
justify-content: start | start | center | end | ... <br /> align-content: start | start | center | end | ... <br /> To align entire grid inside grid container. Only applies if container is larger than the grid |
- Aligning tracks inside container: distribute empty space
justify-content: center; align-content: center;
- Aligning items INSIDE cells: moving items around inside cells
align-items: center; justify-items: center;