askvity

How do you put things beside each other in CSS?

Published in CSS Layout 3 mins read

You can put things beside each other in CSS using several techniques, including display: inline-block, Flexbox, and Grid. Each method offers different strengths and is suitable for various layout scenarios.

1. Using display: inline-block

The display: inline-block property allows elements to flow next to each other like inline elements but retain block-level characteristics like setting width and height.

Example:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
.container {
  width: 500px;
  border: 1px solid black;
}

.item {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
  text-align: center;
}

Explanation:

  • .item elements are set to display: inline-block, causing them to arrange horizontally.
  • width, height, margin, and other box model properties can be applied as they would to block-level elements.

Advantages:

  • Simple to implement for basic horizontal layouts.
  • Good browser support.

Disadvantages:

  • Whitespace between HTML elements can create unwanted gaps. This can be mitigated with various techniques such as removing the whitespace in the HTML, using negative margins, or setting the font-size of the parent to zero.
  • Less flexible than Flexbox or Grid for complex layouts.
  • Vertical alignment can be tricky.

2. Using Flexbox

Flexbox (Flexible Box Layout) is a powerful CSS layout module designed for creating complex and responsive layouts with ease.

Example:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
.container {
  display: flex;
  width: 500px;
  border: 1px solid black;
}

.item {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
  text-align: center;
}

Explanation:

  • display: flex is applied to the container, making it a flex container.
  • The direct children of the container become flex items and are laid out along the main axis (horizontally by default).

Advantages:

  • Highly flexible for controlling alignment, spacing, and ordering of items.
  • Excellent for responsive layouts.

Disadvantages:

  • Requires understanding of flex container and flex item properties.
  • Can be overkill for very simple layouts.

3. Using CSS Grid

CSS Grid Layout is a two-dimensional layout system that allows you to create complex grid-based layouts.

Example:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
  width: 500px;
  border: 1px solid black;
}

.item {
  height: 50px;
  background-color: lightblue;
  margin: 5px;
  text-align: center;
}

Explanation:

  • display: grid is applied to the container, making it a grid container.
  • grid-template-columns defines the number and width of the columns. repeat(3, 1fr) creates three columns of equal width, each taking up one fraction (fr) of the available space.

Advantages:

  • Powerful for complex two-dimensional layouts.
  • Offers precise control over the placement of items.

Disadvantages:

  • Can be more complex to learn than Flexbox or inline-block.
  • May be overkill for simple one-dimensional layouts.

In summary, choose the method that best suits the complexity and requirements of your layout. inline-block is suitable for simple horizontal arrangements, while Flexbox and Grid provide more powerful and flexible solutions for more complex layouts.

Related Articles