Skip to main content
Design34 words1 min read

Modern CSS Layouts

Written by
UI Designer

CSS has come a long way. Today we primarily use Grid and Flexbox. Flexbox Best for 1-dimensional layouts (rows OR columns). CSS Grid Best for 2-dimensional layo...

#css#frontend#layout

CSS has come a long way. Today we primarily use Grid and Flexbox.

Flexbox

Best for 1-dimensional layouts (rows OR columns).

CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS Grid

Best for 2-dimensional layouts (rows AND columns).

CSS
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Decision Tree

U

Written by

UI Designer
Tags#css#frontend#layout

Related Articles

Engineering

Understanding React Hooks

A deep dive into useState and useEffect with visual diagrams.

Design

Visuals and Diagrams

Visualizing information is key to understanding. Amytis integrates Mermaid.js for diagrams and handles images with ease. Mermaid Diagrams You can write diagrams...