Creating a CSS grid with multiple rows and columns that expand dynamically

Currently, I am facing challenges with the layout of this CSS design. The number of items ("n") is dynamic and can increase indefinitely. My goal is to create a layout that consists of n rows and many columns (or an unlimited number of columns).

For instance, if n equals 2, and there are 3 items, the desired arrangement should be as follows:

-----------
| 1 || 3 |
-----------
| 2 |
-----------

With the same value of n, but having 6 items, the layout should look like this:

-----------------
| 1 || 3 || 5 |
-----------------
| 2 || 4 || 6 |
-----------------

This pattern continues for additional items.

I initially attempted using float: left, without success. Currently, I am exploring flex layout options, but I seem to have hit a roadblock.

Your guidance would be greatly appreciated! Feel free to check out my Fiddle.

Note: All items will share the same dimensions in terms of width and height.

htmlcssflexbox

Answer №1

Is this similar to what you're looking for?

Check out jsFiddle 1

.items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
/* Additional styling below */

.items {
  background-color: #0f9c8a;
  padding: 4px;
  height: 250px;
  width: 100%;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #6f6ac2;
  border: 1px solid #fff;
  margin: 2px;
  text-align: center;
  line-height: 100px;
}
<div class="items">
  <div class="item">
    Item 1
  </div>
  <div class="item">
    Item 2
  </div>
  <div class="item">
    Item 3
  </div>
  <div class="item">
    Item 4
  </div>
  <div class="item">
    Item 5
  </div>
</div>

Update: To align the .item divs to the left, add align-content:flex-start; to the container .items like this:

Checkout jsFiddle 2

.items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
}
/* Additional styling below */

.items {
  background-color: #0f9c8a;
  padding: 4px;
  height: 250px;
  width: 1000px;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #6f6ac2;
  border: 1px solid #fff;
  margin: 2px;
  text-align: center;
  line-height: 100px;
}
<div class="items">
  <div class="item">
    Item 1
  </div>
  <div class="item">
    Item 2
  </div>
  <div class="item">
    Item 3
  </div>
  <div class="item">
    Item 4
  </div>
  <div class="item">
    Item 5
  </div>
</div>

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

Navigation links transforming hues unpredictably

After creating a navigation list for a client using the [Oswald]() font-face, an issue arose when the user scrolled over the links. Instead of a navigation arrow popping up as intended, the links turned orange upon hovering. Despite removing all javascript ...

cssfont-face

Is it possible to integrate a Neo4j Graph Visualization running on a virtual machine into my flask user interface?

My current setup involves running Neo4j on an Azure Virtual Machine and accessing the graph visualization through a web browser. In addition, I have developed a UI using Python with Flask that is currently running locally. I am interested in embedding th ...

pythonhtmlflaskneo4jazure-virtual-machine

How to achieve automatic width with absolute positioning in Bootstrap 4 within a display flex layout

My HTML code includes a div with the display set to flex using Bootstrap 4. I then inserted another div inside it and applied position: absolute along with a transform: rotate property. Here is an example: <div class="container"> <div ...

htmlcsstwitter-bootstrapbootstrap-4

ASP.NET DIV is experiencing issues with Jquery functionality, causing it to flicker and remain fixed in place

As a beginner in JQuery, I am facing an issue with my code in asp.net. Whenever I click on linkbuttons, the behavior is not as expected. The div flickers and does not change its direction. My goal is to move the DIV left or right by 200px, but no matter wh ...

javascriptjquerycssasp.net

Advantages of Maintaining or Disabling the CSS Outline on Websites

Have you noticed how anchors around buttons or images create a dotted outline when clicked on or in focus? I usually disable these outlines with CSS to give a cleaner look, but I've heard there can be issues for keyboard-based users. What has been you ...

htmlcssbuttonuser-experience

I am experiencing difficulty transitioning the view in React Native from a side position to an inward direction

Currently tackling a design project and encountering a roadblock in achieving a specific curved effect. Here are two images for reference: The Desired Design: My Current Progress: The basic structure is in place, but hitting a wall when attempting to cu ...

javascripthtmlcssreact-nativereact-navigation

css Issue with the "left" property

Is it possible to center the left side (left border) of a child div within its parent div? I tried using left: 50% in the CSS for the child div, but it doesn't seem to be working. Can anyone explain why? <div id="outher"> <div id="inner ...

htmlcsspositioning

Dots are used to indicate overflow of title in React Material UI CardHeader

Is there a way to add ellipsis dots to the title in my Cardheader when it exceeds the parent's width (Card width)? Here is what I have attempted so far: card: { width: 275, display: "flex" }, overflowWithDots: { textOverflow: &apo ...

javascriptcssreactjsmaterial-ui

Optimal method for arranging Vue components

When deciding where to position a child element, should it be done within its own CSS scope or from the parent? In the scenario provided below, would it be more effective to use margin-left: auto; on the parent element or the child element (both options a ...

cssvue.js

Displaying an Array in HTML using Angular

Just starting out with Angular and experimenting with data display from an array. The data in the array is: [Me, Three, Four] I attempted to loop through it for printing but encountered issues. Here's a snippet of how I'm currently handling it: ...

angularhtmlangular7

Utilize the tab functionality within AngularJS

By default, HTML disables two tabs "<tab heading='Test Case Details' active='tabs[1].active' disable='true'>"+ "<tab heading='Test Case Past Results' active='tabs[2].active' disable='true&apo ...

htmlangularjstabs

Tips for creating several radio buttons with separate functionality using Bootstrap 5

Is there a way to create separation between these two groups of radio buttons? Whenever I select an option in one group, it automatically deselects the option in the other group. <!DOCTYPE html> <html lang="en"> <head> ...

htmlradio-buttonbootstrap-5

How come padding-bottom isn't effective in increasing the position of an element?

My goal is to adjust the position of the orange plus sign (located in the lower right corner of the screen) so that it aligns better with the other icons, directly below them. I've tried using padding-bottom, but it doesn't seem to work, while pa ...

htmlcssasp.net-mvcrazor

Is it a CSS or Javascript quirk when a div can become the child of the div before it?

On every browser I've checked, the code in the html is exactly the same: <td class="bardisplay"> <div class="bar hot" /> <div class="bar cool" /> </td> However, in the debugger of each browser, including Chrome, the DOM ...

javascripthtmlcsscross-browser

Creating a three-column layout with position fixed in the center

I'm struggling with achieving a maximum width of 400px for the entire set of three columns and centering them. ---------------------------------------------------- | | | |----------------------------- ...

htmlcss

The visibility of the button background created with :before will only be apparent when a content property is specified

There's an unusual issue I've encountered... I have a simple button, nothing out of the ordinary, just a basic button like this <button class="btn btn--error"> Button Text </button> Now, I want to add an image next to my button ...

htmlcss

error in URI (not a valid URI):

Encountering an issue with a URI that is triggering a bad URI error. http://localhost:3000/api/v1/company_donations.json?token=foo&donation={&amount=101}&comment=Ordered The goal is to have the URL carry 2 attributes Token Donation obje ...

htmlruby-on-railsurl

Troubleshooting with matTootip on Safari: Tips for avoiding input-text blockage

I am currently using the matTooltip feature from Angular Material for an input field. However, on Safari, the input field appears to be overlapping, making it impossible to type in. Despite my attempts to change the position of the toolTip, the issue pers ...

cssangularangular-material

When hovering over the background, it will enlarge but the text in front will remain the same size

As the user hovers over the image, the image enlarges. However, there is also some information that needs to be displayed in front of the image. This is my current implementation: .home-about-link { overflow: hidden; width: 100%; } .home-about { ...

javascriptjqueryhtmlcsscss-transforms

Nightwatch failing to locate element within iFrame

I'm currently facing a challenge when trying to access an element within an iframe. Despite successfully switching to the frame, Nightwatch keeps returning "element not found" whenever I attempt to verify its presence or visibility. Below is a snippe ...

javascriptcssiframenightwatch.js