Generate an unspecified number of columns

Imagine having a list of items like the following:

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

These items are typically displayed in a single column, one after the other:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

What if you want to display these items in columns within a fixed height ul container, as shown in this image?

https://i.sstatic.net/w1eBt.png

The width of each item should be flexible, adjusting the column size as needed:

https://i.sstatic.net/X2weq.png

I've tried using floats and flexbox with wrapping, but haven't found a satisfactory solution. Any suggestions?

Answer №1

Here is a suggested solution:

  ul { 
    list-style-type: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 80vh;
  }

  ul li { 
    padding: 10px;
    background-color: lavender;
    border: solid 1px black;
    margin: 5px;
    width: fit-content;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE-edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
<body>  
  <ul>
   <li>Item 1</li>
   <li>Item 2aaaaaaaaaaaaaaa</li>
   <!-- More list items... -->
  </ul>
</body>
</html>

Answer №2

I finally cracked the code. The magic lies in using the "align-content" property of flexbox. It's like it was made for this exact purpose.

Check out my creation here: https://codepen.io/web123xyz/pen/ABCdefG

<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item Cxxx</li>
  <li>Item D</li>
  <li>Item E</li>
  <li>Item F</li>
  <li>Item G</li>
</ul>

ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    flex-wrap: wrap;
    height: 200px;
}
ul li {
    padding: 10px;
    background-color: lightblue;
    border: solid 1px black;
    margin: 5px;
    width: fit-content;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I need to condense my layout from three columns to just two columns in HTML

The html code for "Date Accessed" is meant to be in one column as a header, while the actual dates should be in another column, but somehow they are all appearing in a single column. I am having trouble figuring out why. <!DOCTYPE html> {% load stati ...

JavaScript form with radio buttons

I'm completely new to JavaScript and I'm attempting to create a basic script that will show one form when a radio button is checked, and another form when the second radio button is clicked (with no form displayed when neither is selected). I kno ...

Guide for manually initiating the mouseleave event on a smartphone or tablet

Is there a way to change the color of a link to orange when it's hovered over? On mobile devices, the link should turn orange when touched and stay that way until the user clicks away. I'd like to manually trigger the mouseout event to remove th ...

What is the solution to this issue? How can I break the grid row in Bootstrap 4? Which specific Bootstrap classes should I apply for this task?

Test Links. Utilizing Bootstrap classes, adjust the div element with the ID "links" to display differently based on screen resolutions. On extra small screens (<576px), each link and ad should occupy one whole row. It will have this appearance: https:// ...

Animated div or fieldset featuring a multi-step form

I have recently put together a detailed step-by-step guide. Each step is wrapped in its own "fieldset" within a single .html file. To navigate back and forth, I have incorporated javascript into the process. However, as time goes on, I am noticing that th ...

The font from the server is not displaying correctly in the local HTML file

After uploading the ttf font file to the server, I utilized the following CSS code: @font-face { font-family: "fontname"; src: url("http://www.mywebsite.com/Fonts/fontname.ttf"); } body { font-family: "fontname", sans-serif; } Within the loc ...

divs placed next to each other

I'm facing an issue with 4 divs within a parent div. I've used float:left in the style of all 4 divs to display them side by side. Although the divs are appearing next to each other, the height of the parent div is not adjusting to accommodate th ...

The buttons will move down when the heading tag is enlarged

I’ve been developing a mobile site and came across some code that’s causing an issue. <div class="profile-div-wrapper"> <div class="profile-div"> <div class="header"> <img src="assets/images/image.png" alt=""><h3 ...

Please request user input in order to generate a multiplication chart

Is there a way to ensure that the program works properly so that when the user inputs a value, it is included in the multiplication table? <html> <head> <title> Multiplication Table </title> <style> body{ font-family: aria ...

Showing a hidden div after an unsuccessful AJAX call

Encountering an issue with displaying a div notification using the code snippet below: $.ajax({ url: url, cache: false, async: false, success: function (data) { response = jQuery.parseJSON(data); }, error: functi ...

CSS float layout for arranging boxes of varying sizes

I am having trouble organizing this layout with CSS and using floats on the divs. The layout consists of standard sized boxes, a large box, and a tall box. Here is the link to the jsfiddle for reference. Here is the markup I am working with - <head> ...

Steps to troubleshoot a scrollbar problem while applying flexbox in CSS

I'm currently working with a front-end framework that utilizes a flex layout. In my development of an admin page, I have included sections for the sidebar, header, and main. My objective is to ensure that the sidebar and the header + main sections fun ...

Customizing background images for individual web pages

Having some trouble changing the background image on my Squarespace website homepage. After exploring forums and inspecting my website's source code, I tried using the id #collection-51648018e4b0d7daf0a7cece to target just the homepage background but ...

The width of a div element seems to mimic the width of the entire page inexplic

There is a page containing various div elements. HTML: <div class="utilitiesHeader"> <div id="utilitiesLogo"></div> <div id="utilitiesFIO">Name of user</div> </div> <div class="utilitiesContent"> <d ...

Align the text in the center and the image to the right within a table cell <td>

Is there a way to keep text centered in a cell while right aligning an image within the same cell? When I use float:right on the image, it displays correctly but pushes the text to the left by the width of the image. Any solutions? <table> <tr ...

Steps to generate a unique URL for launching a Bootstrap Modal directly

I've encountered a problem where I'm trying to trigger a Modal in window B using a URL when clicking on an image link in window A. The image is nested inside an anchor tag like this: <a href="myserver.mydestinationB.com#myModal><img src= ...

What is the best way to optimize CSS formatting for proper loading?

While using Chrome DevTools, I identified the specific section of CSS that requires modification. My goal is to change the color element within this section. The code snippet below was discovered through the "Inspect" feature of Chrome DevTools #header-p ...

Firefox is not compatible with CSS animation

I am facing an issue with a select box in "multiple" mode that fetches its data asynchronously. While waiting for the data to load, I want to display a spinner inside the select box. Interestingly, the code works perfectly fine on Chrome, Chromium, and Edg ...

Displaying text around columns and images using Bootstrap 4

Hello, I am facing an issue with my text not wrapping around the images while using Bootstrap 4. Instead of wrapping around, it stays on the right side. Could it be because I placed the images in separate columns? I want the two images to stack on top of ...

CSS text width going from left to right

I am attempting to create a text fade effect from left to right, inspired by the technique discussed in this answer. However, I would like the text to be concealed behind a transparent background div instead of the white background used in the example. I ...