css Question posted in
Some basic documentation can be found here.

Is it possible to use CSS Grid or Flex on a HTML that has nested divs?

I am trying to create a two column layout that only displays two items per row. Something like what’s mentioned on here Align child elements of different blocks but my HTML structure is different and that solution doesn’t work in my case.

Here is the structue of my HTML:

<div class="twoLayout">
    <div class="LeftColumn">
        <div class="childItem"></div>
        <div class="childItem"></div>
        <div class="childItem"></div>
        <div class="childItem"></div>
    </div>
    <div class="RightColumn">
        <div class="childItem"></div>
        <div class="childItem"></div>
        <div class="childItem"></div>
        <div class="childItem"></div>
    </div>
</div>

The question I have is, given this structure of HTML, how would I use CSS Gird or Flexbox to make sure that each childItem in the LeftColumn is aligned exactly with each childItem in the RightColumn on the same row?

Right now the issue I am running into is that sometimes depending on how long the content is on some of these childItems the alignments are getting messed up. For example this how it current looks:
enter image description here

But I am hoping it would look something like this where each childItem from the Left and Right column are alinged on the same row:
enter image description here

I know that if I didn’t have the LeftColumn or the RightColumn div, I could easily use CSS-Grid or Flex Box to fix the alignment.

But suppose I can’t modify this HTML, could I still use CSS-Grid or Flex box or any other technique to make the connection between the child item in left column and child item in the right column to fix the alignments?

Tags:

2

Answers


  1. 0

    I don’t know if it’s possible to achieve the appearance you’re asking for with pure CSS alone. However, you can use a minimum height to ensure that the divs don’t overflow unexpectedly. Additionally, employing a maximum height can help ensure that the elements are aligned correctly, although this might result in some content being cut off.

    .twoLayout {
  display: flex;
  gap: 20px;
}

.LeftColumn, .RightColumn {
  display: flex;
  flex-direction: column;
}
.childItem {
  min-height: 100px; /* Set a minimum height */
  padding: 10px;
  box-sizing: border-box; 
}
    <div class="twoLayout">
    <div class="LeftColumn">
        <div class="childItem">TEXT</div>
        <div class="childItem">TEXTTEXTTEXTTEXTTEX<br>TTEXTTEXTTEXTTEXTTEXTTEXTTEX<br>TTEXTTEXTTEXTTEXT</div>
        <div class="childItem">TEXT</div>
        <div class="childItem">TEXT</div>
    </div>
    <div class="RightColumn">
        <div class="childItem">TEXT</div>
        <div class="childItem">TEXT</div>
        <div class="childItem">TEXT</div>
        <div class="childItem">TEXT</div>
        <div class="childItem">TEXT</div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    In my understanding you need to show left column child items and right column child items in the same row .
    if so it is possible with flex, hope it will help you.

       //set parent <div> display option flex
    .twoLayout{
      display: flex;
    }
   //set first child <div> leftColumn flex:1  so it will take all available 
   //space in left
    .LeftColumn{
      flex: 1;
    }
    //you can specify any size for flex basis as per your requirement
    .RightColumn{
      flex-basis: 300px;
    }

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search