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 –

<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);
}

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;
}

---

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%;
}

---

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;   
}