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：
<div >
<div >
<div >
<div >
<div >
<div >
<div ></div>
<div ></div>
</div>
</div>
<div >
<div >
<div ></div>
<div ></div>
</div>
</div>
</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 approach but definitely outside of the norm here. Good luck!