DEV Community

Cover image for Four ways to align boxes horizontally, each in under three lines of CSS
Robert Mion
Robert Mion

Posted on

Four ways to align boxes horizontally, each in under three lines of CSS

#html #css #tutorial #webdev

Start with semantic HTML 

<ul>
  <li>
    <img src="https://placehold.it/300x180" alt="" />
    <h2>Text label</h2>
    <p>Descriptive text</p>
  </li>
  <li>
    <img src="https://placehold.it/300x180" alt="" />
    <h2>Text label</h2>
    <p>Descriptive text</p>
  </li>
  <li>
    <img src="https://placehold.it/300x180" alt="" />
    <h2>Text label</h2>
    <p>Descriptive text</p>
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

List with three items

Add some declarations to reset a few browser default styles 

/* Resets */
img {
  max-width: 100%;
}
ul {
  padding: 0;
  list-style-type: none;
}
Enter fullscreen mode Exit fullscreen mode

Four options to stack the list items horizontally instead of vertically

1. CSS Columns: 1 declaration 

ul {
  columns: 3;
}
Enter fullscreen mode Exit fullscreen mode

Layout using CSS columns

2. Inline-block display with calc(): 2 declarations 

li {
  width: calc((100vw / 3) - 20px);
  display: inline-block;
}
Enter fullscreen mode Exit fullscreen mode

Layout using inline-block and calc

3. CSS Flexbox: 1 declaration 

ul {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

Layout using CSS flexbox

4. CSS Grid: 2 declarations 

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
Enter fullscreen mode Exit fullscreen mode

Layout using CSS grid

Keep it simple. Don't feel stupid.

Want to practice? Here's two free resources.

  1. FrontEndMentor.io
  2. FreeCodeGame.com

Top comments (0)

Read next

mathuraditya7 profile image

Deploying Hono Js App on Vercel

Aditya Mathur -

coderonfleek profile image

Sending Data in HTMX Requests (3 Ways)

Fikayo Adepoju -

rzumbado profile image

immich SSO with Authentik

Rafael Zumbado -

phuocng profile image

Lazy load a Google Map

Phuoc Nguyen -