I have implemented two types of layouts using the display grid feature. Check out the screenshot
However, I noticed that the first columns in both layouts are not equal in width.
The width of the first column in Layout 1 is: 239.40px
Whereas, the width of the first column in Layout 2 is: 240.70px
Is there a way to set them equally using the fraction unit (fr)?
Below you can find the code snippet:
.grid-container {
display: grid;
grid-gap: 25px;
}
/* News Module 1 */
.grid-container--news1 {
grid-template-columns: 2fr 1fr 1fr 1fr;
}
.grid-container--news1 .grid-item:nth-of-type(1) {
grid-row: 1 / 4;
}
.grid-container--news1 .grid-item:nth-of-type(2) {
grid-column: 2 / 4;
}
/* News Module 2 */
.grid-container--news2 {
grid-template-columns: 1.3fr 1fr 1fr;
}
.grid-container--news2 .grid-item:nth-of-type(1) {
grid-row: 1 / 3;
}
.grid-container--news2 .grid-item:nth-of-type(2) {
grid-column: 2 / 4;
}
.grid-item {
background: steelblue;
color: <div class="row gx-3 gx-md-4">
<div class="col-12 mb-3">
<h3>News Module 1</h3>
<div class="grid-container grid-container--news1">
<?php for ($i=1; $i < 7; $i++): ?>
<div class="grid-item"><?php echo $i; ?></div>
<?php endfor; ?>
</div>
</div>
<div class="col-12">
<h3>News Module 2</h3>
<div class="grid-container grid-container--news2">
<?php for ($i=1; $i < 5; $i++): ?>
<div class="grid-item"><?php echo $i; ?></div>
<?php endfor; ?>
</div>
</div>
</div>
</div>