Achieve horizontal wrapping of div elements

Question

Achieve horizontal wrapping of div elements

Currently, I am developing a blog where search results for articles will be displayed within divs. The design of the website is completely horizontal, meaning that articles scroll horizontally.

Creating a single line of divs is straightforward, but it's not what I have in mind. To better illustrate my idea, let me provide a diagram of how I envision the div layout:

 ______________   ______________   ______________
|    Div 1     | |    Div 4     | |    Div 7     |
|______________| |______________| |______________|
 ______________   ______________   ______________
|    Div 2     | |    Div 5     | |    Div 8     |
|______________| |______________| |______________|
 ______________   ______________ 
|    Div 3     | |    Div 6     |
|______________| |______________|

However, if the height of the window is increased, allowing more vertical space, the layout should adjust accordingly:

 ______________   ______________ 
|    Div 1     | |    Div 5     |
|______________| |______________|
 ______________   ______________ 
|    Div 2     | |    Div 6     |
|______________| |______________|
 ______________   ______________ 
|    Div 3     | |    Div 7     |
|______________| |______________|
 ______________   ______________
|    Div 4     | |    Div 8     |
|_______________| |______________|

I refer to this as horizontal wrapping, where divs maximize available vertical space before moving on to a new column.

Initially, I hoped to achieve this effect using purely HTML and CSS, but now I suspect that achieving it may require some JavaScript.

javascript html css

Answer 1

Answer №1

To achieve this layout, you can utilize the power of Flexbox. Make sure to define a fixed height on the parent element or use 100vh along with flex-direction: column.

* {
  box-sizing: border-box;
}
ul {
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

li {
  padding: 20px 60px;
  border: 1px solid black;
}

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

Answer 2

To achieve this layout, you can utilize the power of Flexbox. Make sure to define a fixed height on the parent element or use 100vh along with flex-direction: column.

* {
  box-sizing: border-box;
}
ul {
  display: flex;
  height: 100vh;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

li {
  padding: 20px 60px;
  border: 1px solid black;
}

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

Answer 3

Answer №2

It seems like the best way to achieve this layout using only CSS is with flexbox:

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;

To see a live example, you can check out this link and adjust the height of the container:

https://codepen.io/MattDiMu/pen/zdBxad

Note: Using 100vh for the size of the container is a much more elegant solution.

Answer 4

It seems like the best way to achieve this layout using only CSS is with flexbox:

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;

To see a live example, you can check out this link and adjust the height of the container:

https://codepen.io/MattDiMu/pen/zdBxad

Note: Using 100vh for the size of the container is a much more elegant solution.

Answer 5

Answer №3

Did you know that achieving this in CSS/HTML is actually possible? It's true! By utilizing simple CSS without even using flexbox, you can achieve the desired layout. The key is knowing where to apply certain CSS properties. In this case, setting the box to float:left allows it to consume the width of the container, which can be dynamic such as 50vw for half of the screen width or a percentage.

Check out this example on CodePen

I hope this information is helpful!

[UPDATE]

It seems I misunderstood the question as it mentioned horizontal stacking in the explanation. Nevertheless, this answer may still be beneficial for those seeking a pure CSS solution for horizontal layout.

Answer 6

Did you know that achieving this in CSS/HTML is actually possible? It's true! By utilizing simple CSS without even using flexbox, you can achieve the desired layout. The key is knowing where to apply certain CSS properties. In this case, setting the box to float:left allows it to consume the width of the container, which can be dynamic such as 50vw for half of the screen width or a percentage.

Check out this example on CodePen

I hope this information is helpful!

[UPDATE]

It seems I misunderstood the question as it mentioned horizontal stacking in the explanation. Nevertheless, this answer may still be beneficial for those seeking a pure CSS solution for horizontal layout.

Achieve horizontal wrapping of div elements

Answer №1

Answer №2

Answer №3

Similar questions

An express error caught off guard: Unexpected "write after end" issue detected

Techniques for implementing a JS script within a useEffect hook in a functional component

Can JavaScript bypass the need for an html page and go directly to the printing process?

Efficient methods for transferring information between a main and pop-up page within angularjs

What causes the content area of my <input> element to extend beyond the boundaries of its parent <span> element?

Issue with fixed header in Vuetify v-data-table not functional

Utilizing HTML5 canvas to extract pixel data from an image loaded from an external source

Guide for utilizing a table value as a parameter in a mySQL query with PHP

The type 'IProduct' cannot be assigned to type '[]'

Designing a layout with one box on top and two beneath it, covering the entire page, can be achieved by following these steps

Using Javascript/React to filter an array by a specific value

Efficiently rearranging elements by adjusting their top values techniques

Error in Mathquill: Unable to access the 'prototype' property because it is undefined

Place the social media division at the center of the webpage

Sending a null value through AJAX to a controller

We could not locate the requested resource with a DELETE request using the fetch JSON method

Creating a MySQL table that includes long string data types

Executing a .sh script upon loading a webpage

Update the CSS styles

What methods do HTML document Rich Text Editors use to incorporate rich text formatting features?