How to set grid columns equally with another grid layout-CodePudding

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: white;
  font-size: 20px;
  padding: 20px;
  border: skyblue 1px solid;
}

<div >
        <div >
          <h3>News Module 1</h3>
          <div >
            <?php for ($i=1; $i < 7; $i  ): ?>
            <div ><?php echo $i; ?></div>
            <?php endfor; ?>
          </div>
        </div>

        <div >
          <h3>News Module 2</h3>
          <div >
            <?php for ($i=1; $i < 5; $i  ): ?>
            <div ><?php echo $i; ?></div>
            <?php endfor; ?>
          </div>
        </div>
      </div>
    </div>```

CodePudding user response：

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.