3 ways of building layouts
3 ways of building layouts
Feiliang Zhou

3 ways of building layouts

#webdev#CSS#beginners#programming

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

  1. Float layout

    The old way of building layouts of all sizes, using the float CSS property. Still used, but getting outdated fast.

  2. Flex box

    Modern way of laying out elements in a 1-dimensional row without using floats. Perfect for component layouts.

  3. 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

  1. Flex container
  2. Flex items
  3. Main axis
  4. Cross axis
display: flex;
Flex containerFlex items
gap: 0 | <length> <br /> To create space between items, without using marginalign-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 axisflex-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 largeflex: 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

  1. Grid container 
     display: grid;
  2. Grid items
  3. Row axis
  4. 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 containerGrid 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 spacegrid-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 tracksjustify-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;