My goal is to create a CSS grid layout with 6 columns, but I want to divide them into 2 groups of 3 columns each. Each group should take up 50% of the width, and be left-aligned.
For example:
#parent {
width: 100%;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 1fr) repeat(3, 1fr);
}
.cell {
background-color: yellow;
}
.cell2 {
background-color: lightblue;
}<div id="parent">
<div class="cell">Label 1</div>
<div class="cell">60</div>
<div class="cell">44</div>
<div class="cell2">Label 2 (xxxx)</div>
<div class="cell2">80</div>
<div class="cell2">11</div>
</div>You can also view this layout on plunkr.
The current grid setup produces:
https://i.sstatic.net/slc44.png
However, I want it to look like:
https://i.sstatic.net/WCUXH.png
Each "group" of columns should have cells with min-content so they can grow as needed within their 50% width.
This is just a simplified example, in my actual project the number of divs is dynamic and controlled by an Angular component with *ngFor in the markup, meaning I can't predict the total number of divs in advance (though I know they will always be in groups of 3).
Is it possible to achieve this with a single grid layout?
Update 1
Upon further reflection, my initial example was too simple compared to my actual application requirements.
I am actually working with a table structure that may contain multiple rows. This complicates layouts which rely on nested divs, especially when dealing with different label widths.
For instance, consider the following structure proposed in one of the responses:
<div id="parent">
<!-- first row -->
<div class="cell cell1">
<div>Label 1</div>
<div>60</div>
<div>44</div>
</div>
<div class="cell cell2">
<div>Label 2 (xxxx)</div>
<div>80</div>
<div>11</div>
</div>
<!-- second row -->
<div class="cell cell1">
<div>Label3 xxx</div>
<div>60</div>
<div>44</div>
</div>
<div class="cell cell1">
<div>Label4 1xxx</div>
<div>60</div>
<div>44</div>
</div>
</div>
#parent {
width: 100%;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
}
.cell {
display: flex;
gap: 1rem;
}
.cell1{
background-color: yellow;
}
.cell2 {
background-color: lightblue;
}
In this scenario, the columns won't align correctly: