CODEWITHSUNDEEP
htmlcss
jben
jben

Reputation: 33

How to set grid columns equally with another grid layout

I have a 2 types of layout using display grid. See Screenshot

But i was wondering why the first columns are not equal in width?

Layout 1 first column width is: 239.40px

Layout 2 first column width is: 240.70px

how to set it equally using fr?

Here's my code

.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>

Upvotes: 2

Views: 235

Answers (2)

YangTech
YangTech

Reputation: 11

easy way to get around is to use "%" to set the width of the first column rather than "fr".

Rather than using:

.grid-container--news1 {
  grid-template-columns: 2fr 1fr 1fr 1fr;
}

/* News Module 2 */
.grid-container--news2 {
  grid-template-columns: 1.3fr 1fr 1fr;
}

you can use:

.grid-container--news1 {
  grid-template-columns: 40% 1fr 1fr 1fr;
}

/* News Module 2 */
.grid-container--news2 {
  grid-template-columns: 40% 1fr 1fr;
}

Upvotes: 1

A Haworth
A Haworth

Reputation: 36457

I don't think you'll manage to set it equally using fr.

There will be rounding errors and with your gap sizes being specified in absolute px units regardless of the value of 1vw the two layouts aren't going to be left with the same amount of free space.

You could however set the first column to a percentage and they should then come out the same on both layouts.

Alternatively you can do a calculation to decide the width you want in terms of the width of the container less the gaps.

Looking at the first grid we've got:

2fr + 3*25px +3fr = 100%

So the width of the first column can be calculated by CSS as

  calc((100% - 75px) * 2 / 5)

You can specify that for the width of the first column for both layouts and then the remaining fr settings as you have now.

Upvotes: 3

Related Questions