Home » Exercises » CSS Exercises » CSS Layout

CSS Layout

Write CSS to centre a box horizontally using margin auto

Description: Centre a box of width 250px horizontally on the page.

Hint:

  • A block element with a width can be centred with margin: 0 auto.

CSS to centre a box with margin auto

<style>
  .box {
    width: 250px;
    margin: 0 auto;
    padding: 16px;
    background: #ffe0b2;
    text-align: center;
  }
</style>

<div class="box">I am in the centre.</div>

Output in the browser:

Output in the browser
I am in the centre.

How it works

  • margin: 0 auto means zero margin on top and bottom, and automatic margin on left and right.
  • The browser splits the free space equally on both sides. Without a width, the block takes the full width, so there is no free space to share.

Read CSS Margins.

Write CSS to centre a div horizontally and vertically using Flexbox

Description: Centre a small box in the middle of a 200px high container.

Hint:

  • Make the parent a flex container.
  • Use justify-content: center and align-items: center.

CSS to centre a div with Flexbox

<style>
  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background: #eceff1;
  }
  .child {
    padding: 12px 20px;
    background: #7e57c2;
    color: white;
  }
</style>

<div class="parent">
  <div class="child">Centred</div>
</div>

Output in the browser:

Output in the browser
Centred

How it works

  • justify-content works on the main axis (horizontal by default) and align-items on the cross axis (vertical).
  • The parent needs a height, otherwise there is no free space to centre in.

Read CSS Flexbox.

Write CSS to create a horizontal navigation menu

Description: Create a dark horizontal menu with the links Home, About, Services and Contact, and a different background when the mouse is over a link.

Hint:

  • Remove bullets with list-style: none.
  • Use display: flex on the ul.
  • Style the a tags with padding, and add an a:hover rule.

CSS horizontal navigation menu

<style>
  .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    background: #333;
  }
  .menu a {
    display: block;
    padding: 12px 18px;
    color: white;
    text-decoration: none;
  }
  .menu a:hover {
    background: #0073aa;
  }
</style>

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Output in the browser:

Output in the browser

How it works

  • A menu is a list of links. display: flex on the ul puts the items in one row.
  • display: block with padding on the links makes the whole box clickable, not only the text.
  • On your page, the background of a link turns blue when you hover over it (the hover colour does not show in this box).

Read CSS Lists and CSS Links.

Write CSS to create a three column layout using Flexbox

Description: Create three columns: a left sidebar, a main content area (twice as wide) and a right sidebar.

Hint:

  • Make the container display: flex.
  • Use flex: 1 for the sides and flex: 2 for the middle.

CSS three column layout

<style>
  .row { display: flex; gap: 10px; }
  .left, .right { flex: 1; background: #ffe0b2; padding: 12px; }
  .main { flex: 2; background: #c8e6c9; padding: 12px; }
</style>

<div class="row">
  <div class="left">Left</div>
  <div class="main">Main content</div>
  <div class="right">Right</div>
</div>

Output in the browser:

Output in the browser
Left
Main content
Right

How it works

  • The free space is shared in the ratio 1 : 2 : 1, so the middle column gets half of the width.
  • gap adds space between the columns.

Read CSS Flexbox.

Write CSS to create a responsive card grid using CSS Grid

Description: Create a grid of four cards that fits as many columns as the screen allows, and stacks on a phone.

Hint:

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

CSS responsive card grid

<style>
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }
  .card {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px;
  }
</style>

<div class="cards">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

Output in the browser:

Output in the browser
Card 1
Card 2
Card 3
Card 4

How it works

  • minmax(150px, 1fr) says each column is at least 150px wide, and can grow to share the free space.
  • auto-fit makes as many columns as fit. On a narrow phone the cards come in one column.

Read CSS Grid.