CSS Layout Practice: Flexbox, Grid and Position

Practise building real layouts with Flexbox, CSS Grid and positioning, from navigation bars to card grids and badges. Each solution is rendered live.

Intermediate6 problemsUpdated October 24, 2026

Review first: Flexbox, Flex Items: grow, shrink, basis, CSS Grid, Grid Lines and Template Areas, Centering Anything, Position

1.A navigation bar

Intermediate

Lay out the header with the logo on the left and the links on the right, vertically centered, with 16px between the links and 12px 16px padding on the header.

HTML to style

<header class="bar">
  <strong>Laviyx</strong>
  <nav class="links">
    <a href="#">Courses</a>
    <a href="#">Practice</a>
    <a href="#">About</a>
  </nav>
</header>

Show hint

display: flex with justify-content: space-between and align-items: center on the header, and display: flex; gap on the nav.

Show solution

CSS

.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #1d3b4f;
  color: white;
}
.links {
  display: flex;
  gap: 16px;
}
.links a {
  color: white;
  text-decoration: none;
}

ResultRendered by your browser

2.Center a box

Beginner

Center the message box both horizontally and vertically inside the 200px tall .stage.

HTML to style

<div class="stage">
  <div class="message">Your cart is empty</div>
</div>

Show hint

Two lines on the parent: display: grid and place-items: center.

Show solution

CSS

.stage {
  height: 200px;
  display: grid;
  place-items: center;
  background: #f1f3f5;
}
.message {
  padding: 12px 18px;
  background: white;
  border-radius: 8px;
}

ResultRendered by your browser

3.A fixed sidebar and flexible content

Intermediate

Make the sidebar exactly 160px wide and never shrink, and the main content take all the remaining width, with 12px between them.

HTML to style

<div class="layout">
  <aside class="side">Sidebar</aside>
  <main class="main">Main content grows to fill the space.</main>
</div>

Show hint

flex: 0 0 160px for the sidebar and flex: 1 for the main area.

Show solution

CSS

.layout {
  display: flex;
  gap: 12px;
}
.side {
  flex: 0 0 160px;
  background: #c9f0d3;
  padding: 10px;
}
.main {
  flex: 1;
  background: #cfe3ff;
  padding: 10px;
}

ResultRendered by your browser

4.A responsive card grid

Intermediate

Make the cards form a grid where each column is at least 150px wide, columns fill the available width, and there are 12px gaps. It should change the number of columns automatically as the width changes, without media queries.

HTML to style

<div class="grid">
  <div class="card">HTML</div>
  <div class="card">CSS</div>
  <div class="card">JavaScript</div>
  <div class="card">TypeScript</div>
  <div class="card">SQL</div>
</div>

Show hint

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)).

Show solution

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.card {
  padding: 24px 12px;
  text-align: center;
  background: #eef3ff;
  border-radius: 8px;
}

ResultRendered by your browser

5.A page layout with grid areas

Intermediate

Use grid-template-areas to place a header across the top, a nav (120px wide) and main content side by side, and a footer across the bottom, with 8px gaps.

HTML to style

<div class="page">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
  <footer>Footer</footer>
</div>

Show hint

Draw the layout with one string per row, then give each element its grid-area.

Show solution

CSS

.page {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  gap: 8px;
}
.page > * {
  padding: 10px;
  background: #f1f3f5;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; min-height: 80px; }
footer { grid-area: footer; }

ResultRendered by your browser

6.A badge in the corner

Intermediate

Place the "New" badge in the top-right corner of the card, 8px from the top and right edges, without affecting the card's layout.

HTML to style

<div class="card">
  <span class="badge">New</span>
  <h3>CSS Grid course</h3>
  <p>Learn two-dimensional layouts.</p>
</div>

Show hint

position: relative on the card and position: absolute with top and right on the badge.

Show solution

CSS

.card {
  position: relative;
  max-width: 260px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  background: crimson;
  color: white;
  border-radius: 999px;
  font-size: 12px;
}

ResultRendered by your browser

← All practice sets Learn CSS course →