How to wrap 2 lists using bootstrap or css grid?

user_4244462 0
Viewed 92

I have 2 lists of objects of different length I want to display in boxes. (list A and list B). I want the lists to be responsive for mobile and desktop. List 'B' should take only 1 column.

I've been able to get 2 lists to render but I'm not able to get list 'A' to expand the full width after list 'B' is done.

https://jsfiddle.net/heratyian/mcjenLpt/27/

<div class="container">

  <div class="row">

    <div class="col-6 col-md-8 col-lg-10">
      <div class="row">
        <div class="col-12 col-md-6 col-lg-4 box">
          A1
        </div>
        <div class="col-12 col-md-6 col-lg-4 box">
          A2
        </div>
        <div class="col-12 col-md-6 col-lg-4 box">
          A3
        </div>
        <div class="col-12 col-md-6 col-lg-4 box">
          A4
        </div>
        <div class="col-12 col-md-6 col-lg-4 box">
          A5
        </div>
        <div class="col-12 col-md-6 col-lg-4 box">
          A6
        </div>
        <div class="col-12 col-md-6 col-lg-4 box">
          A7
        </div>
        <div class="col-12 col-md-6 col-lg-4 box">
          A8
        </div>
        <div class="col-12 col-md-6 col-lg-4 box">
          A9
        </div>
        <div class="col-12 col-md-6 col-lg-4 box">
          A10
        </div>
        <div class="col-12 col-md-6 col-lg-4 box">
          A11
        </div>
        <div class="col-12 col-md-6 col-lg-4 box">
          A12
        </div>
      </div>  
    </div>

    <div class="col-6 col-md-4 col-lg-2">
      <div class="row">
        <div class="col-12 box">
          B1
        </div>
        <div class="col-12 box">
          B2
        </div>
        <div class="col-12 box">
          B3
        </div>
      </div>
    </div>  
  </div>
</div>

Here is a markdown table to show what I'm trying to do.

. . . .
A1 A2 A3 B1
A4 A5 A6 B2
A7 A8 A9 A10
A11 A12 A13 A14
. .
A1 B1
A2 B2
A3 A4
A5 A6

Is there a css grid property to tell list 'A' to take full available width? I'm using bootstrap grid, but am open to css-grid if needed.

css-grid twitter-bootstrap css
3 Answers

You can get this using CSS grids.

The items must be direct child of the container. To get around this problem, you can chnage the HTML, or keep this intermediate level and hide it using display: contents;

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-auto-flow: dense;
}

.list {
  display: contents;
}

.list div {
  border: solid 1px blue;
}

.B {
  grid-column-end: -1;
  background-color: lightblue;
}

.A {
  order: 2;
}
<div class="container">
  <div class="list">
    <div class="A">A1</div>
    <div class="A">A2</div>
    <div class="A">A3</div>
    <div class="A">A4</div>
    <div class="A">A5</div>
    <div class="A">A6</div>
    <div class="A">A7</div>
    <div class="A">A8</div>
    <div class="A">A9</div>
    <div class="A">A10</div>
    <div class="A">A11</div>
    <div class="A">A12</div>
    <div class="A">A13</div>
  </div>
  <div class="list">
    <div class="B">B1</div>
    <div class="B">B2</div>
    <div class="B">B3</div>
  </div>
</div>

user_19263690

Unfortunately, I don't think there is a way to style your html that way. You are basically forcing two separate list contents (A and B) inside of each other based on available width. Content boxes (if you are using div's or li's) don't naturally flow this way, and to do this would require a css/javascript solution that will probably not be cross-browser friendly... just my opinion (sorry s.o.). There may be a flexbox or grid approach but definitely outside of the norm here. Good luck!

https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/

I stand corrected... @vals :-) Here is how to make it responsive without media queries!

.container {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-template-rows: repeat(16, 60px);
}
user_189695200 
      <div class="container">
  <div class="row">
    <div class="col--lg-12">
      <div class="row">
        <div class="col-12 col-lg-6 col-md-6 col-sm-12 box">
         <div class="row">
         <div class="col-6 col-md-6 col-lg-4 box"></div>
         <div class="col-6 col-md-6 col-lg-4 box"></div>
         </div> 
        </div>
        <div class="col-12 col-lg-6 col-md-6 col-sm-12  box">
         <div class="row">
         <div class="col-6 col-md-6 col-lg-4 box"></div>
         <div class="col-6 col-md-6 col-lg-4 box"></div>
         </div> 
        </div>
      </div>  
    </div>
</div>
user_191421230
Related