Is there a way to achieve a two-column layout using flexbox while maintaining consistent spacing between items in each column?

Hey there! I could really use some assistance. I'm attempting to create a two-column layout with consistent spacing between items in the same column. https://i.sstatic.net/hb5bT.png

.flex {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
}

.item {
  width: 45%;
  height: 200px;
  margin-bottom: 10px;
  background-color: navy;
}

.item:nth-child(1) {
  height: 210px;
}

.item:nth-child(2) {
  height: 500px;
}

.item:nth-child(3) {
  height: 360px;
}

.item:nth-child(4) {
  height: 400px;
}

.item:nth-child(5) {
  height: 150px;
}
<div class="flex">
  <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>

Thank you for any valuable advice and your assistance!

htmlcssflexbox

Answer №1

Instead of relying on flexbox, you can opt for using the column-count property. This approach eliminates the need for a flexible box layout when you do not require uniform sizes or special alignment adjustments.

.flex
{
  margin: 0;
  padding-left: 0;
  list-style: none;
  column-count: 2;
  column-gap: 10px;
}

.item{
  height: 200px;
  margin-bottom: 10px;
  background-color: navy;
  break-inside: avoid;
}

.item:nth-child(1){height: 210px;}
.item:nth-child(2){height: 500px;}
.item:nth-child(3){height: 360px;}
.item:nth-child(4){height: 400px;}
.item:nth-child(5){height: 150px;}
<div class="flex">
  <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>

You can also utilize percentages for the column gap by setting column-gap to 0px and applying a negative margin to the container to compensate for excess margins on the sides.

.flex
{
  margin: 0;
  padding-left: 0;
  list-style: none;
  column-count: 2;
  column-gap: 0;
  margin: 0 -1.25%;
}

.item{
  height: 200px;
  margin-bottom: 10px;
  background-color: navy;
  break-inside: avoid;
  margin: 0 2.5% 5%;
}

.item:nth-child(1){height: 210px;}
.item:nth-child(2){height: 500px;}
.item:nth-child(3){height: 360px;}
.item:nth-child(4){height: 400px;}
.item:nth-child(5){height: 150px;}
<div class="flex">
  <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>

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

What could be causing my checkbox to become unresponsive and fail to reset?

I recently created a function to update my page title when the toggle button is clicked, but unfortunately, it seems to be getting stuck after the click. I can't seem to pinpoint the issue with this function, as I've tried coding it in both JQuer ...

javascripthtmljquerybootstrap-5

When trying to set the focus on the first item in a list using HTML and Angular, the focus unexpectedly shifts to the second

I've been tackling a UI requirement where the focus needs to be set on the first element of a list item constructed from an array of objects when the tab key is pressed for the first time. Subsequent tab key presses should cycle through the list items ...

htmlangulartypescripttabindex

The CSS "ul" selector targets unordered lists in HTML

How can I target the ul elements highlighted below in my HTML markup without using a class or id for reference? Here is the relevant portion of my HTML code: <div id="mainmenu"> <ul class="menu"> <li class="item-472"> < ...

htmlcsscss-selectors

What is the best way to showcase MySQL outputs in a Flask application?

Good evening everyone, I'm Eric, currently learning how to create web applications using Flask and Python. I've made some progress connecting to the database and performing searches without any problems. However, I am encountering two issues that ...

pythonhtmlflask

What steps can be taken to enable automatic playback for this slider?

After downloading the slider from this site, I've been attempting to enable autoplay on this slider but have not had any success. Can anyone provide guidance on how I can achieve this? I've tried modifying the code below without achieving the des ...

javascriptjqueryhtmlcss

I am facing an issue where HTML is not loading images or some parts of my CSS in PHP

I've been working on connecting my website to a MySQL database using PHP. Initially, I thought I could keep the HTML and CSS the same, but after adding everything, the images on the website stopped showing up as they did before. The fonts and other el ...

phphtmlcssimage

Is there a way to ensure Internet Explorer continues to maintain the opacity of an overlay during the animation of the underlying element?

My slideshow, created with jQuery Cycle, features an overlay that utilizes CSS opacity and filters. The animation is also controlled by jQuery. The issue arises in IE versions 6/7/8 where the filter responsible for setting the overlay opacity does not wor ...

jquerycssinternet-explorerfilteropacity

Activate a CSS class on click using JavaScript

Having a bit of trouble as a beginner with this. Any help would be much appreciated. This is the code in question: HTML: <div class='zone11'> <div class='book11'> <div class='cover11'></d ...

javascriptjquerycssanimationonclick

Adding Firebase Data to Vue Table

I am currently utilizing Vue Table JS, which can be found at https://github.com/matfish2/vue-tables-2 <script type="text/javascript"> Vue.use(VueTables.ClientTable); new Vue({ el: "#app", data: { columns: ['name', 'code', ...

javascripthtmlvue.js

Overflowing Padding and Margin in Bootstrap Card Column

Is there a solution to prevent padding overflow in the Bootstrap Card Column when trying to split a dictionary of items into three columns? The issue is that the padding from bottom rows spills into the top of the next column (refer to col1->col2). Vie ...

htmlcssbootstrap-4card

Customizing animations for birds

I'm currently in the process of developing a new website. The link to access the site is: One thing I am eager to achieve is having birds from this specific link incorporated into my background: I have attempted various methods without success. If a ...

javascripthtmlthree.jsboids

Extracting data from a dynamic table structure

Currently, I am working alongside my backend developer to address some challenges with form submissions. The specific situation involves a table within an HTML form that consists of two columns and rows that can be dynamically added. Users have the ability ...

javascripthtmlasp.netvisual-studio

Loading local HTML files in Vue 3 (Vite) iframe consistently defaults to displaying index.html

I'm relatively new to Vue and I'm attempting to embed a local HTML file into my Vue template using an iframe. Despite encountering related questions and solutions, none have resolved my issue so far. Here is what my component currently looks lik ...

htmlvue.jsiframevue-router

CSS - Ensuring that the height of one div extends all the way down to meet another div

I'm facing an issue with two divs in my design. One of them contains a checkbox and the other has text which can vary in size - sometimes it's small, sometimes it's large. When the text in the second div is big, the box on the left extends a ...

htmlcss

Steps for including a path to a base64 encoded image

I am currently facing a challenge in embedding images into my emails where I need to encode them using an online tool. The issue I am encountering is that the email template I am using has a dynamic URL, with ${loginurl}/images as the path to my image. H ...

javascripthtmlhtml-email

Exploring the process of assigning responses to questions within my software program

I am looking to display my question choices as radio buttons in a modal window. I have tried several solutions without success. Here is my question module: import questions from "./Data"; const QuestionModel = () => { return ( <div cl ...

javascripthtmlreactjs

Is it possible to retrieve the complete source HTML code of a webpage that is dynamically generated by JavaScript using Java and WebDriver?

I'm new to the world of programming and I've encountered a challenge that I need to overcome. I'm attempting to retrieve the HTML source code of a webpage using the Java / Webdriver method getPageSource(). However, the page seems to be dynam ...

javascriptjavahtmlselenium-webdriver

Transferring buttons from one webpage to another in Python using Django

Recently, I inherited the task of developing project management software written in Python/Django, even though I haven't had much experience with either language... On one particular webpage, there are some buttons that would be beneficial to include ...

pythonhtmldjango

"Glowing orbs in the night: a dark mode spectacle with

I have implemented a night mode (or perhaps dark mode) toggle button located at the top-right corner of my webpage. Here is a link to a perfect example showcasing what I am aiming for However, unlike the provided link, I switch between night mode and lig ...

javascripthtmlcsskeyframe

Example of a chat server code using NodeJS

I'm looking to add a chat module to my web application. After searching on , I found several chat modules but none of them have clear examples on how to implement them in my project. Can someone share a tutorial that is based on existing NodeJS modul ...

javascripthtmlnode.jschat