Arranging the child components within various parent sections in perfect alignment

I am currently attempting to align variable height elements vertically across containers. The goal is to have the first element in each container align vertically with each other, the second element in each container align vertically with each other, and so on.

While using flexbox for this layout, I am uncertain if this alignment is achievable. Is it possible to achieve this using CSS Grid instead?

Desired outcome

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

Check out the demo where I have not yet been successful in achieving the desired vertical alignment.

main {
  display: flex;
  flex-wrap: wrap;
}

.container {
  background: grey;
  margin: 0 10px 20px;
  padding: 10px;
  width: 200px;
}

.top {
  background: red;
}

.middle {
  background: blue;
}

.bottom {
  background: green;
}
<main>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too, And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here, Some text here, Some text here</div>
    <div class="middle">And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
</main>

htmlcssflexboxcss-grid

Answer №1

Perhaps utilizing the grid with display: contents could provide a solution for you.

main {
  display: grid;
  
  grid-auto-columns: 200px;
  column-gap: 20px;
}

.container {
  display: contents;
}

.top {
  grid-row: 1;
}

.middle {
  grid-row: 2;
}

.bottom {
  grid-row: 3;
}

Check out this link for more information

You may need to add additional child elements if the original .container styles are critical.

Answer №2

Give this a try, it might be helpful for you

.wrapper {
  background: grey;
  margin: 0 10px 20px;
  padding: 10px;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Check out the live demo here - http://codepen.io/anon/pen/oZxaja?editors=1100

Answer №3

Directly addressing the question at hand, it appears that achieving what you're attempting with your current HTML structure using only CSS/flexbox may not be feasible. While there may be a way to accomplish this via JavaScript, it would likely involve a considerable amount of effort.

If possible, restructuring your HTML so that the top, middle, and bottom sections are each contained within their own rows could simplify the alignment process greatly. By maintaining containers inside these rows to achieve the desired visual layout dynamically, you can still achieve the look you desire more easily...

.row {
  display: flex;
  flex-direction: row;
}

.container {
  background: grey;
  margin: 0 10px 0px;
  padding: 10px;
  width: 200px;
}

.top {
  background: red;
}

.middle {
  background: blue;
}

.bottom {
  background: green;
}
<main>
  <div class="row">
    <div class="container">
      <div class="top">Some text here, Some text here, Some text here</div>
    </div>
    <div class="container">
      <div class="top">Some text here, Some text here</div>
    </div>
  </div>
  
  <div class="row">
    <div class="container">
      <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    </div>
    <div class="container">
      <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here, And some here, And some here, And some here</div>
    </div>
  </div>
  
  <div class="row">
    <div class="container">
      <div class="bottom">And a little here too</div>
    </div>
    <div class="container">
      <div class="bottom">And a little here too, And a little here too</div>
    </div>
  </div>
</main>

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

Both radio buttons are being chosen simultaneously

<div class="container"> <div class="row"> <form> <div class="form-group"> <label>username</label> <br /> <input type="text" class=" ...

htmlangularbuttonradio-button

Is there a way to automatically scroll the page to the main content as soon as the user begins scrolling?

On my website, I want to have a full-screen image at the top followed by the main content right below it. I am looking for a way to automatically scroll the page down to the main content as soon as the user starts scrolling. How can I achieve this using ...

jqueryhtmlcss

Tips for eliminating checkboxes from a form

function addCheckbox(){ var labels = document.form1.getElementsByTagName('label'); var lastLabel = labels[labels.length-1]; var newLabel = document.createElement('label'); newLabel.appendChild(Checkbox(labels.length)); ...

javascripthtmldomcheckbox

Positioning of a paper-dialog in Polymer

I'm currently utilizing polymer's paper-dialog element in my application. While the dialog is always centered by default, I am looking to establish a minimum distance between the dialog and the right side of the window. This way, as the window re ...

htmlcssdompolymer

The navigation menu is stuck and will not toggle

I'm having trouble getting the button to toggle the nav bar to work properly. I've gone through similar questions and checked my html, but still can't figure out the issue. Any help would be greatly appreciated! Although I can see all the l ...

htmlbuttonnavigationbartogglebutton

Box with plus symbol

One of my current projects involves creating a pill button with the following styling: <button class="button">Pill Button</button> .button { border: 1px solid red; color: black; padding: 10px 20px; text-align: center; text-d ...

htmlcssbootstrap-4

Styling a list using multiple columns with CSS

My goal is to design a columned list using only HTML and CSS. I have experimented with floats and inline-block, but it seems like inline-block is the best option for me due to these specific requirements: The layout must be in columns; The number of colu ...

htmlcss

Having an issue with my JavaScript burger menu not functioning properly

I'm really struggling to figure out why my code isn't working. I've checked and rechecked all the links, and everything seems correct. Could it possibly be because the code is outdated? I've been stuck on this for two days now and can&a ...

javascripthtmlcssnavigation

Top method for including a new class upon clicking the i tag within a DIV

My HTML file includes a rating feature with star icons that change color when clicked by the user. While my code works, I find it too lengthy and feel there must be a more efficient approach to achieve the same functionality. Any assistance would be greatl ...

javascripthtmljquerybootstrap-4

Exchanging items through Drag and Drop

My current project involves using drag and drop functionality to allow students to rearrange pieces of an image that has been jumbled up. They can drag these pieces onto a grid to recreate the original image. Both the jumbled up grid and the reconstructio ...

javascripthtml

Tips for applying stroke and shadow effects specifically when the mouse is moving over a canvas:

How can we create a shadow and stroke effect for circles drawn using HTML canvas only during mouse hover? I have two circles and would like to add a shadow and stroke effect when the mouse hovers over them. However, the issue is that once the mouse moves ...

javascripthtmlhtml5-canvas

What steps can be taken to ensure that only a single decimal separator is included?

I've created a calculator in HTML with two display screens, operators, and number buttons. The challenge I'm facing is implementing a decimal separator. Initially, I attempted to use a boolean variable as a switch, but the number() function remov ...

javascripthtmlcordovacross-platform

Utilizing PHP to dynamically load HTML forms and leveraging JQuery for form submissions

I am currently facing a dilemma that I am unsure how to approach. It seems that JQuery requires unique ID's in order to be called in the document ready function. I use PHP to read my MySQL table and print out HTML forms, each with a button that adds a ...

javascriptphpjqueryhtmlmysql

What is the most efficient method for transferring ASP.NET form data to an Excel spreadsheet?

I am confident that exporting data from my web form should be achievable, but I'm not quite sure of the steps involved. My web form contains numerous select dropdowns and input boxes. Could anyone guide me on how to export the data from these asp co ...

htmlasp.netexcel

Customize card borders with Handlebars and BootStrap styling

I am utilizing Bootstrap 4 with nested cards containing tabs and headers, which also house forms. Additionally, I am using Handlebars to retrieve JSON data and fill in the form fields. However, upon transitioning from hardcoded data to using Handlebars fo ...

cssbootstrap-4handlebars.js

How to keep Vuetify component at the top of the v-layout?

https://i.stack.imgur.com/cKdsk.png I am in the process of creating a website using vuetify and nuxt. My goal is to specify the max-width property for the expansion panel UI component (https://vuetifyjs.com/en/components/expansion-panels). Here is my curr ...

cssvue.jsvuetify.js

Struggling to halt the continuous motion

Trying to create a typewriting effect using HTML5 has been quite the challenge. To bring it all together, I've turned to the pixi.js plugin. While I have managed to get it partly working, it appears that the update() method responsible for updating t ...

javascripthtmlhtml5-canvaspixi.js

The input field does not retain decimal numbers and automatically changes them to ,00

Working on a website and I encountered an issue with an input field that needs custom decimal numbers. When I enter 36.82 and click save, it changes to 36.00. Code : <tr> <td>Btw tarief: </td> <td><input type="text" n ...

javascriptphphtml

Can the data cells of columns be dynamically adjusted to align them on a single vertical line?

For some time now, I have been grappling with a CSS issue. I am working with a table that has 3 columns displaying departures, times, and situational text for scenarios like delays or cancellations. However, as evident from the images, the alignment of th ...

cssreactjstypescriptsass

Retrieving InnerHTML of a Rendered DOM Element in AngularJS

Can I retrieve the innerHTML code of a rendered element that contains an ng-repeat loop? Here is an example: <div id="container"> <div ng-repeat="e in ctrl.elements>{{e.name}}</div> </div> ...

javascripthtmlangularjsdomrender