How to make side-by-side boxes using CSS?

You can easily create side-by-side boxes using the CSS flex-box or grid system. Let’s see how to use them to create side-by-side boxes –

This is the layout we will convert to the side-by-side boxes –

simple CSS full width box layout
<div class="container">
    <div class="item">Box 1</div>
    <div class="item">Box 2</div>
    <div class="item">Box 3</div>
    <div class="item">Box 4</div>
    <div class="item">Box 5</div>
</div>
*,
*::before,
*::after {
  box-sizing: border-box;
  line-height: 1.5em;
}

.container {
  border: 3px solid black;
  padding: 10px;
}

.item {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
}

.item:nth-child(1) {
  background-color: #5C1CB0;
}

.item:nth-child(2) {
  background-color: #E81788;
}

.item:nth-child(3) {
  background-color: #F3C757;
}

.item:nth-child(4) {
  background-color: #F08500;
}

.item:nth-child(5) {
  background-color: #C42323;
}

1. CSS Grid to create side-by-side boxes

  • display: grid; – applying the grid system.
  • grid-template-columns: – define the number of columns.
  • repeat(3, 1fr) – It means 3 columns of equal width.
  • 1fr – Here fr is a fractional unit and 1fr is for 1 part of the available space. You can provide value in PX or percentage like – repeat(2, 300px) or repeat(5, 20%).
.container{
    border: 3px solid black;
    padding: 10px;

    /* applying the grid system */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
css grid 3 column side by side boxes

Add gaps between columns and rows

With the help of gap: property, you can put gaps between columns and rows.

.container{
    border: 3px solid black;
    padding: 10px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    /* Adding Gaps */
    gap: 10px;
}
CSS grid side by side boxes with gaps

2. CSS FlexBox to create side-by-side boxes

  • display: flex; – applying the FlexBox.
  • flex-wrap: wrap; – It will wrap the overflowing flex items.
  • flex-basis: 33.33%; – It sets the width. 33.33% because, It makes three columns. Note: flex-basis controls width when flex-direction is row.
.container{
    border: 3px solid black;
    padding: 10px;

    /* FlexBox */
    display: flex;
    flex-wrap: wrap;
}

.item{
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    padding: 20px;
   
    flex-basis: 33.33%;
}
css flexbox 3 column side by side box

FlexBox with gap

You can also use the gap property to add gaps between the boxes. But, It will not work properly if you give accurate width (flex-basis).

.container{
    border: 3px solid black;
    padding: 10px;

    
    /* FlexBox */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.item{
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    
    flex-basis: 30%;
    flex-grow: 1;   
}
css flexbox with gaps