Arranging Divs into Two Columns in CSS - A Simple Guide

Question

Arranging Divs into Two Columns in CSS - A Simple Guide

I'm trying to display a variable number of divs across two lines, like this:

[1]  [3]  [5]  [7]

[2]  [4]  [6]  ...

I've explored using the column-count property in CSS, but it doesn't quite fit my needs since it requires a fixed number of columns. I wish there was something like a line-count property available.

Is there a way to achieve this with pure CSS, or should I create container divs for every group of two vertical divs?

Thanks!

Edit: I have simplified the code example to showcase my issue. Even though I have set the height property for the container div, shouldn't the article divs stack by twos? Currently, they are overflowing the container.

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="container">
<div class="article">A</div>
<div class="article">B</div>
<div class="article">C</div>
<div class="article">D</div>
<div class="article">E</div>
</div>
</body>
</html>

Here is the corresponding CSS:

.article {
width:50px;
height:50px;
border:1px gray dashed;
margin:1px;
}

.container {
height:110px;
max-height:110px;
}

Despite the code configuration, all the article divs are displaying in a single column.

html css

Answer 1

Answer №1

To create multiple columns in a container, you can utilize the columns CSS property:

#columns-holder {
  -moz-columns: 100px;
  -webkit-columns: 100px;
  columns: 100px;
  -moz-column-gap: 15px;
  -webkit-column-gap: 15px;
  column-gap: 15px;
}
.box {
  width: 100px;
  height: 100px;
  margin-bottom: 15px;
  background: grey;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

<div id="columns-holder">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>

Answer 2

To create multiple columns in a container, you can utilize the columns CSS property:

#columns-holder {
  -moz-columns: 100px;
  -webkit-columns: 100px;
  columns: 100px;
  -moz-column-gap: 15px;
  -webkit-column-gap: 15px;
  column-gap: 15px;
}
.box {
  width: 100px;
  height: 100px;
  margin-bottom: 15px;
  background: grey;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

<div id="columns-holder">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>

Answer 3

Answer №2

To achieve this layout, utilize flexbox and set flex-direction: column; This will automatically create new columns once the parent element's height is reached.

Check out an example below:

* {
  box-sizing: border-box;
}
.flex-container {
  display: flex;
  flex-flow: column wrap;
  /* defines when a new "column" begins */
  height: 200px;
  align-content: flex-start;
}
.flex-container .item {
  flex: 0 0 auto;
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 4px;
}

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
</div>

Answer 4

To achieve this layout, utilize flexbox and set flex-direction: column; This will automatically create new columns once the parent element's height is reached.

Check out an example below:

* {
  box-sizing: border-box;
}
.flex-container {
  display: flex;
  flex-flow: column wrap;
  /* defines when a new "column" begins */
  height: 200px;
  align-content: flex-start;
}
.flex-container .item {
  flex: 0 0 auto;
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 4px;
}

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
</div>

Answer 5

Answer №3

Whenever I need to implement something like this, I rely on the float property along with a specific code snippet that should be applied to each div you wish to display:

.divclass{
    float: left;
    margin: 10px;
    width: 300px;
}

It's important not to overlook clearing the float after the list of divs:

<br stytle="clear: both;">

This setup allows me to efficiently place as many divs as possible within the screen width before moving onto the next line for any additional divs. The number of divs per row is, of course, dependent on the screen or container div width. If you provide more of your code, I could offer further assistance.

Answer 6

Whenever I need to implement something like this, I rely on the float property along with a specific code snippet that should be applied to each div you wish to display:

.divclass{
    float: left;
    margin: 10px;
    width: 300px;
}

It's important not to overlook clearing the float after the list of divs:

<br stytle="clear: both;">

This setup allows me to efficiently place as many divs as possible within the screen width before moving onto the next line for any additional divs. The number of divs per row is, of course, dependent on the screen or container div width. If you provide more of your code, I could offer further assistance.

Answer 7

Answer №4

When it comes to using Column-count and creating a simple list markup

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
<ul>

This CSS can be implemented:

ul {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

Alternatively, you can utilize CSS3 as shown below: The CSS3 solution would appear like this:

HTML

<div id="wrap">
    <div class="list_item">A</div>
    <div class="list_item">B</div>
    <div class="list_item">C</div>
    <div class="list_item">D</div>
    <div class="list_item">E</div>
    <div class="list_item">F</div>
    <div class="list_item">G</div>
    <div class="list_item">H</div>
</div>

CSS:

.list_item {
    float: left;
    margin: 5px;
    padding: 5px;
    width: 200px;
    border: 1px solid gray;
}
#wrap {
    width:460px;
    column-count:2;
    column-gap:20px;
    -moz-column-count:2;
    -moz-column-gap:20px;
    -webkit-column-count:2;
    -webkit-column-gap:20px;
}

For more information, visit this link

Answer 8

When it comes to using Column-count and creating a simple list markup

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
<ul>

This CSS can be implemented:

ul {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

Alternatively, you can utilize CSS3 as shown below: The CSS3 solution would appear like this:

HTML

<div id="wrap">
    <div class="list_item">A</div>
    <div class="list_item">B</div>
    <div class="list_item">C</div>
    <div class="list_item">D</div>
    <div class="list_item">E</div>
    <div class="list_item">F</div>
    <div class="list_item">G</div>
    <div class="list_item">H</div>
</div>

CSS:

.list_item {
    float: left;
    margin: 5px;
    padding: 5px;
    width: 200px;
    border: 1px solid gray;
}
#wrap {
    width:460px;
    column-count:2;
    column-gap:20px;
    -moz-column-count:2;
    -moz-column-gap:20px;
    -webkit-column-count:2;
    -webkit-column-gap:20px;
}

For more information, visit this link

Answer 9

Answer №5

Here is a demonstration of a grid layout with 4 elements in each row.

You have the flexibility to adjust the size of the .container element as per your preference, without relying on vw units.

Why use widht:22%;?
One might assume that setting width:25% would be logical for 4 elements per row since 4x25 equals 100.
Feel free to modify the code below accordingly :) By opting for 22%, it allows space for border margins and padding so the items fit together seamlessly.
For a more precise fit with no gaps, consider using box-sizing: border-box, removing margin and padding, and setting a width of 25%. This should provide a near-perfect alignment.

.container {
  width: 50vw;
  border: 5px solid pink;
}
.container .item {
  display: inline-block;
  border: 2px solid firebrick;
  width: 22%;
  height: 50px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 10

Here is a demonstration of a grid layout with 4 elements in each row.

You have the flexibility to adjust the size of the .container element as per your preference, without relying on vw units.

Why use widht:22%;?
One might assume that setting width:25% would be logical for 4 elements per row since 4x25 equals 100.
Feel free to modify the code below accordingly :) By opting for 22%, it allows space for border margins and padding so the items fit together seamlessly.
For a more precise fit with no gaps, consider using box-sizing: border-box, removing margin and padding, and setting a width of 25%. This should provide a near-perfect alignment.

.container {
  width: 50vw;
  border: 5px solid pink;
}
.container .item {
  display: inline-block;
  border: 2px solid firebrick;
  width: 22%;
  height: 50px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Arranging Divs into Two Columns in CSS - A Simple Guide

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to eliminate existing double quotation marks within string values stored in objects in Angular?

Adjust the cell text overflow based on the width of the table

Ways to modify the cursor of a disabled ImageButton on an ASP.Net webpage

List-group item in Bootstrap 4 featuring an arrow on the right side

Fade between two elements using jQuery

Customizing CSS float labels for individual inputs

Implementing append operations in JavaScript without relying on the id attribute

Flexbox: The final element is not positioned on the right side

What steps should I take to correct the color selection of a button that has been pressed down

Flexbox: changing the order and arranging columns in a vertical stack

Efficient ways to enhance CSS animations (including scaling, rotating, and blurring)

Unable to play GSM extension files on a web browser due to compatibility issues

What is the best way to rearrange the elements in a database after they have been displayed?

Align component within material-ui grid

tips for scrolling divs horizontally within the main container

Ways to extract innerHTML content from a loaded element generated by using the .load() method

Create a bootstrap table with td elements that have no wrap for their content

Embedding an iframe with vertical scrolling enabled

Implement a vertical scrolling animation in datatables

Tips for incorporating a Python script into a online project