0

I have a page with multiple UL's along with a heading, I need to split them into 2 columns, with content of a one of the containers not getting split into the next column.

the easiest way was to use columns(css) property which does it exaclty the i want, but it slipts the content of .fixedContainer too.

Code:

.split-2col {
  column-count: 2;
}
<div class="split-2col">
  <div class="fixedContainer">
    <h5 class="marg-left-sm-20">A</h5>
    <ul class="list list--links list--links--plain">
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
    </ul>
  </div>
  <div class="fixedContainer">
    <h5 class="marg-left-sm-20">B</h5>
    <ul class="list list--links list--links--plain">
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
    </ul>
  </div>
  <div class="fixedContainer">
    <h5 class="marg-left-sm-20">C</h5>
    <ul class="list list--links list--links--plain">
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
    </ul>
  </div>
  <div class="fixedContainer">
    <h5 class="marg-left-sm-20">D</h5>
    <ul class="list list--links list--links--plain">
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
    </ul>
  </div>
  <div class="fixedContainer">
    <h5 class="marg-left-sm-20">E</h5>
    <ul class="list list--links list--links--plain">
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
    </ul>
  </div>
</div>

in the image below you see content of section B is going to 2nd column, i expect it be in the first one if it starts in the first one. Is there a way to do this with css?

Content of B is going to next column

Bladimir Medrano Vargas
  • 608
  • 8
  • 15
Amit Pandey
  • 274
  • 4
  • 16

2 Answers2

1

You can use css-grid to split your div in 2 columns:

.split-2col {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.fixedContainer {
  display: flex;
  justify-content: center;
}
<div class="split-2col">
  <div class="fixedContainer">
    <h5 class="marg-left-sm-20">A</h5>
    <ul class="list list--links list--links--plain">
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
    </ul>
  </div>
  <div class="fixedContainer">
    <h5 class="marg-left-sm-20">B</h5>
    <ul class="list list--links list--links--plain">
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
    </ul>
  </div>
  <div class="fixedContainer">
    <h5 class="marg-left-sm-20">C</h5>
    <ul class="list list--links list--links--plain">
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
    </ul>
  </div>
  <div class="fixedContainer">
    <h5 class="marg-left-sm-20">D</h5>
    <ul class="list list--links list--links--plain">
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
    </ul>
  </div>
  <div class="fixedContainer">
    <h5 class="marg-left-sm-20">E</h5>
    <ul class="list list--links list--links--plain">
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
      <li><a href="#">lorem ipsum</a></li>
    </ul>
  </div>
</div>

Also, you can move the order of your div with grid-auto-flow.

Bladimir Medrano Vargas
  • 608
  • 8
  • 15
  • I need to show the list in a order where first column contains the first few fixed containers and then rest moves to the next one. please see the picture i have added. – Amit Pandey Oct 10 '22 at 19:48
1

You can do something similar using this code:

.split-2col {
  display: grid;
  grid-template-columns: auto auto;
 }

Which yields the result you want without splitting the contents of into 2 different rows. Though it does go:

ab
cd
ef

instead of

ad
be
cf

Here's it running:

.split-2col {
  display: grid;
  grid-template-columns: auto auto;
 }
<div class="split-2col">
            <div class="fixedContainer">
                <h5 class="marg-left-sm-20">A</h5>
                    <ul class="list list--links list--links--plain">
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                    </ul>
            </div>
            <div class="fixedContainer">
                <h5 class="marg-left-sm-20">B</h5>
                    <ul class="list list--links list--links--plain">
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                    </ul>
            </div>
            <div class="fixedContainer">
                <h5 class="marg-left-sm-20">C</h5>
                    <ul class="list list--links list--links--plain">
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                    </ul>
            </div>
            <div class="fixedContainer">
                <h5 class="marg-left-sm-20">D</h5>
                    <ul class="list list--links list--links--plain">
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                    </ul>
            </div>
            <div class="fixedContainer">
                <h5 class="marg-left-sm-20">E</h5>
                    <ul class="list list--links list--links--plain">
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                        <li><a href="#">lorem ipsum</a></li>
                    </ul>
            </div>
</div>

If the 2nd example is required, then I'd say you might want to check out this answer to a similar question: CSS Grid vertical columns with infinite rows

John
  • 5,132
  • 1
  • 6
  • 17
  • I need to show the list in a order where first column contains the first few fixed containers and then rest moves to the next one. please see the picture i have added. – Amit Pandey Oct 10 '22 at 19:50
  • Did you see the link i had at the end of my answer? https://stackoverflow.com/questions/44906501/css-grid-vertical-columns-with-infinite-rows – John Oct 11 '22 at 02:10
  • i see, I missed the 2nd part. I can solve this with js, but i wanted to see if there is a way to do it with CSS only, i use grid, it gives fixed height to each fixedContainer, which looks ugly. Thanks for the reply though – Amit Pandey Oct 11 '22 at 12:50