Из примера у меня есть три столбца, при изменении размера на определенном порту просмотра он будет перенесен на следующий ряд, как я могу выбрать этот отдельный div и заставить его заполнить доступную ширину?

.boxes {
  color: white;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.box {
  background-color: blue;
  padding: 10px;
}
<section class = "boxes">
  <div class="box">
    <p>Box 1</p>
  </div>
  <div class="box">
    <p>Box 2</p>
  </div>
  <div class="box">
    <p>Box 3</p>
  </div>
</section>

Codepen:

CodePen

2
CurtisB 27 Ноя 2019 в 23:21
Ваш заголовок неясен.
 – 
Michael Benjamin
28 Ноя 2019 в 04:02

2 ответа

Ограничить столбцы на max-width

Вы можете остаться с сеткой, но она будет хорошо выглядеть, только если вы останетесь с двумя столбцами.

Для большего количества столбцов это более сложно, и вы можете определить, что вы хотите, использовать сетку или использовать гибкость для удобного способа.

html {
  box-sizing: border-box;
}

body {
  background-color: white;
  color: white;
}

.boxes {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.box {
  background-color: blue;
  padding: 10px;
}

.box:last-child:nth-child(odd) {
  grid-column: 1/3;
 }
<!DOCTYPE html>
<html>

<head>
  <title>Column Resize</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <section class="boxes">
    <div class="box">
      <p>Box 1</p>
    </div>
    <div class="box">
      <p>Box 2</p>
    </div>
    <div class="box">
      <p>Box 3</p>
    </div>
  </section>
</body>

</html>
0
Omer 27 Ноя 2019 в 23:44

Вам нужен flexbox для этого:

body {
  color: white;
}

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  background-color: blue;
  padding: 10px;
  min-width: 250px;
  box-sizing:border-box;
  margin: 10px;
  flex-grow: 1;
}
<section class="boxes">
  <div class="box">
    <p>Box 1</p>
  </div>
  <div class="box">
    <p>Box 2</p>
  </div>
  <div class="box">
    <p>Box 3</p>
  </div>
</section>
1
Temani Afif 27 Ноя 2019 в 23:31