Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.7k views
in Technique[技术] by (71.8m points)

html - CSS Grid - 2x2 grid always taking up the full width when possible

I'm trying to create a 2x2 CSS grid (possibly extended to 3x2 in the future) that only pushes items onto the first row when there are three children in the grid, and I'm not sure if this is possible with grid.

The scenarios based on the number of items would be:

2 Items (Minimum)

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
</div>

2 Player Grid

3 Items

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
  <div class="player">Player 3</div>
</div>

3 Player Grid

4 Items

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
  <div class="player">Player 3</div>
  <div class="player">Player 4</div>
</div>

4 Player Grid

So far what I've tried is the following:

.grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 2fr));
  grid-template-rows: repeat(2, minmax(150px, 2fr));
  border: blue 5px solid;
}

.player {
  border: red 5px solid;
  display: flex;
  justify-content: center;
  align-items: center;
}

Changing the number of columns/rows to autofit/autofill also does not produce the desired result, and instead simply takes up the full width regardless. I've attached a live example of what I've tried below:

https://codesandbox.io/s/misty-smoke-bwvtt

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Since it's only about 4 elements in total you can handle each case manually. In this situation, you only need two declarations without the need of any template. The implicit grid will do the job for you.

.grid {
  display: grid;
  height:300px;
  border: blue 5px solid;
}

.player {
  border: red 5px solid;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3 players: make the last one take two colums*/
.player:nth-child(3):nth-last-child(1) {
    grid-column:span 2;
}

/* 4 players: make the second in the second column */
.player:nth-child(2):nth-last-child(3) {
    grid-column:2;
}
<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
</div>

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
  <div class="player">Player 3</div>
</div>

<div class="grid">
  <div class="player">Player 1</div>
  <div class="player">Player 2</div>
  <div class="player">Player 3</div>
  <div class="player">Player 4</div>
</div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...