Learn CSS Grid and Flexbox — layout from first principles

Powerful two-dimensional layout system for complex designs. Grid is the only CSS layout system that works in two directions at once: you describe the columns and the rows on the container, and the children fall into them.

Turning an element into a grid

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
}

display: grid makes every direct child a grid item. grid-template-columns lists the tracks, so this rule creates two columns: a fixed 240px one and a second that takes whatever width is left. 1fr means one share of the free space.

Sizing the tracks

• 200px — a fixed track.
• 1fr — one share of the leftover space. Two 1fr tracks split it evenly; 2fr 1fr gives the first twice as much as the second.
• auto — as wide as the content in it needs to be.
• minmax(200px, 1fr) — never narrower than 200px, otherwise a share of the free space.
• repeat(3, 1fr) — shorthand for 1fr 1fr 1fr.
• repeat(auto-fit, minmax(220px, 1fr)) — as many equal columns as fit at 220px or wider. The column count changes with the viewport without a media query.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

gap

gap sets the gutter between tracks — one value for both axes, or row-gap and column-gap separately. It only applies between tracks, never outside the grid, so you do not get the stray edge margin that putting a margin on every child gives you.

Placing an item on the tracks

By default items fill the tracks in source order, one cell each. grid-column and grid-row override that. Grid lines are numbered from 1, and -1 is the last line, so grid-column: 1 / -1 spans the full width whatever the column count.

.feature {
  grid-column: 1 / 3;   /* from line 1 to line 3 — two columns wide */
  grid-row: span 2;     /* two rows tall, wherever it lands */
}

.full {
  grid-column: 1 / -1;  /* the whole row, however many columns there are */
}

Naming the layout with grid-template-areas

Each string is a row and each word is a column. Repeating a name spans that area across cells, and the map is readable at a glance — which is the point.

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "side   main"
    "footer footer";
  gap: 16px;
  min-height: 100vh;
}

.page > header { grid-area: header; }
.page > nav    { grid-area: side; }
.page > main   { grid-area: main; }
.page > footer { grid-area: footer; }

@media (max-width: 720px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "side"
      "main"
      "footer";
  }
}

The media query redraws the same page as a single column. No markup changes and no classes move — only the area map.

Aligning inside the grid

• justify-items and align-items align every item inside its own cell, across and down.
• justify-content and align-content move the whole set of tracks inside the container, for when the tracks do not fill it.
• justify-self and align-self override the container setting for one item.

The short version

Powerful two-dimensional layout system for complex designs.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

CSS Grid provides precise control over both rows and columns in your layouts.

Create flexible one-dimensional layouts with ease. Flexbox lays items out along a single axis and decides how the leftover space on that axis is shared.

What the container controls

.bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

• flex-direction picks the main axis: row (the default) or column, each with a -reverse variant.
• justify-content distributes items along the main axis: flex-start, center, flex-end, space-between, space-around, space-evenly.
• align-items aligns them across the other axis: stretch (the default), flex-start, center, flex-end, baseline.
• gap sets the space between items, the same as it does on a grid.
• flex-wrap: wrap lets items move onto a new line instead of shrinking past the point of being readable.

What each item controls

.sidebar { flex: 0 0 240px; }  /* never grow, never shrink, 240px wide */
.content { flex: 1 1 auto; }   /* take everything that is left */

flex is shorthand for three properties in order: flex-grow (the share of free space this item absorbs, 0 for none), flex-shrink (how willingly it gives space back when the row is too narrow, 0 for never) and flex-basis (the size it starts from before any growing or shrinking).

• align-self overrides align-items for a single item.
• order changes the visual order without touching the markup. Use it sparingly: it does not change the order a screen reader or the keyboard reads the items in.

Grid or Flexbox?

• One row, or one column, of items — Flexbox.
• Rows and columns that have to line up with each other — Grid.
• Content-driven sizing, like a toolbar of buttons of different widths — Flexbox.
• Layout-driven sizing, like a page shell or a card deck on a fixed rhythm — Grid.
• They nest. A Grid page shell whose header is a Flexbox row is the normal combination.

The short version

Create flexible one-dimensional layouts with ease.

.container {
  display: flex;
  gap: 0.5rem;
}

Flexbox allows easy alignment and distribution of space among items in a container.

Explore the modern styling capabilities that revolutionize how we build for the web.

Animations

Create smooth transitions and keyframe animations without JavaScript.

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.box {
  animation: bounce 1s infinite;
}

CSS animations bring interfaces to life with movement and visual feedback.

Custom Properties

Use variables to maintain consistent styling across your project.

:root {
  --primary-color: #3B82F6;
}
.element {
  background-color: var(--primary-color);
}

CSS variables enable consistent theming and easy style updates across your entire project.

Transform your UI with modern CSS visual effects.

1. Gradients

Create smooth color transitions for backgrounds.

.gradient-box {
  background: linear-gradient(to right, #3B82F6, #8B5CF6);
}

CSS gradients allow smooth transitions between multiple colors without image files.

2. Shadows

Add depth to your elements with box and text shadows.

.shadow-box {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

Shadows create visual hierarchy and depth in your interface.

3. Filters

Apply visual effects like blur and color manipulation.

.blur-effect {
  filter: blur(4px);
}
.hue-rotate {
  filter: hue-rotate(90deg);
}

CSS filters enable powerful image and element manipulations directly in the browser.

4. Transforms

Rotate, scale, skew, or translate elements.

.rotated-box {
  transform: rotate(45deg);
}
.scaled-box {
  transform: scale(1.2);
}

Transforms let you manipulate elements in 2D and 3D space without affecting layout.

Bring your interfaces to life with these CSS-powered interactive elements.

Hover Effects

Enhance interactivity with hover states.

.button {
  transition: all 0.3s ease;
}
.button:hover {
  background-color: #2563EB;
  transform: scale(1.05);
}

Hover effects provide visual feedback for interactive elements.

Toggle Switch

Create custom toggle switches with pure CSS.

/* HTML */
<label class="toggle-switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

/* CSS */
.toggle-switch input {
  opacity: 0;
}
.slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: #E5E7EB;
  border-radius: 12px;
  transition: 0.4s;
}
.slider:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: 0.4s;
}
input:checked + .slider {
  background: #3B82F6;
}
input:checked + .slider:before {
  transform: translateX(20px);
}

CSS-only toggle switches are accessible and customizable.

Create fluid layouts that adapt beautifully to any screen size.

Media Queries

Adapt layouts based on screen size.

/* Mobile first */
.container {
  padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
  }
}

Media queries enable responsive designs that adapt to different screen sizes.

Flexible Grids

Create fluid layouts with flexible units.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

Flexible grids automatically adjust the number of columns based on available space.

Build a modern card component using what you have learned.

<div class="modern-card">
  <h3 class="card-title">Awesome Card</h3>
  <p class="card-text">Hover me to see the effect!</p>
</div>

.modern-card {
  /* Add your styles here */
  background: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
}
.modern-card:hover {
  /* Add hover effects here */
}

Solution

.modern-card {
  background: linear-gradient(to right, #3B82F6, #8B5CF6);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 1.5rem;
  color: white;
  transition: all 0.3s ease;
  transform-origin: center;
}

.modern-card:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}

.card-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.card-text {
  font-size: 0.875rem;
  opacity: 0.9;
}

Craft a beautiful profile card with these CSS properties.

<div class="profile-card">
  <div class="avatar"></div>
  <h3>Your Name</h3>
  <p class="title">Your Profession</p>
  <p class="bio">Short bio here</p>
</div>

/* Add your styles here */
.profile-card {
  background: white;
}

.avatar {
  width: 80px;
  height: 80px;
  background-color: #E5E7EB;
  border-radius: 50%;
  margin: 0 auto;
}

.title {
  color: #6B7280;
  font-size: 0.875rem;
}

.bio {
  color: #9CA3AF;
  font-size: 0.75rem;
}

Show Solution

.profile-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 1.5rem;
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
}

.avatar {
  width: 80px;
  height: 80px;
  background-color: #E5E7EB;
  border-radius: 50%;
  margin: 0 auto 1rem;
}

.title {
  color: #6B7280;
  font-size: 0.875rem;
  margin: 0.5rem 0;
}

.bio {
  color: #9CA3AF;
  font-size: 0.75rem;
  margin-top: 1rem;
}

You have now explored the core concepts of modern CSS styling. These techniques form the foundation for creating beautiful, responsive, and interactive web experiences.