How to wrap 2 lists using bootstrap or css grid?-CodePudding

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 >

  <div >

    <div >
      <div >
        <div >
          A1
        </div>
        <div >
          A2
        </div>
        <div >
          A3
        </div>
        <div >
          A4
        </div>
        <div >
          A5
        </div>
        <div >
          A6
        </div>
        <div >
          A7
        </div>
        <div >
          A8
        </div>
        <div >
          A9
        </div>
        <div >
          A10
        </div>
        <div >
          A11
        </div>
        <div >
          A12
        </div>
      </div>  
    </div>

    <div >
      <div >
        <div >
          B1
        </div>
        <div >
          B2
        </div>
        <div >
          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.

CodePudding user response：

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 >
  <div >
    <div >A1</div>
    <div >A2</div>
    <div >A3</div>
    <div >A4</div>
    <div >A5</div>
    <div >A6</div>
    <div >A7</div>
    <div >A8</div>
    <div >A9</div>
    <div >A10</div>
    <div >A11</div>
    <div >A12</div>
    <div >A13</div>
  </div>
  <div >
    <div >B1</div>
    <div >B2</div>
    <div >B3</div>
  </div>
</div>

CodePudding user response：

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);
}

CodePudding user response：

      <div >
  <div >
    <div >
      <div >
        <div >
         <div >
         <div ></div>
         <div ></div>
         </div> 
        </div>
        <div >
         <div >
         <div ></div>
         <div ></div>
         </div> 
        </div>
      </div>  
    </div>
</div>