htmlcsscss-grid

Questions about the grid box item width

How to let 4's width look like 1 + 2 not now

Because the same is divided into three parts, but it looks different! Why?

I don't know much about grid box, is it the reason for gap?

.grid-container {
  display: grid;
  grid-template-rows: 6fr 4fr;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-row-1 {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr 2fr;
}

.grid-row-2 {
  display: grid;
  gap: 20px;
  grid-template-columns: 2fr 1fr 1fr;
}

.grid-row-1>div,
.grid-row-2>div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  font-size: 30px;
}
<div class="grid-container">
  <div class="grid-row-1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="grid-row-2">
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

result

Solution

  • The boxes aren't aligning because they're in separate containers, making the grid items unrelated to each other. If you are able to modify the HTML, it would be simpler to put all grid items in one container. Also, instead of three columns, use six, to provide space and flexibility.

    .grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* new */
  grid-template-rows: 6fr 4fr;
  grid-gap: 20px;
  background-color: #2196F3;
  padding: 10px;
}

/* new */
div { grid-column: span 2 }
div:nth-child(4) { grid-column: span 4 }
div:nth-child(5) { grid-column: span 1 }
div:nth-child(6) { grid-column: span 1 }

div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  font-size: 30px;
}
    <div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>