Блог

Главная - Вопросы по программированию - Как я могу заставить мой 2-й элемент сетки переноситься в новую строку, когда пространство, оставленное для него в исходной строке, падает ниже определенного значения?

Как я могу заставить мой 2-й элемент сетки переноситься в новую строку, когда пространство, оставленное для него в исходной строке, падает ниже определенного значения?

#html #css #css-grid

#HTML #css #css-grid

Вопрос:

 .wrapper {
  width: 500px;
  border: 5px solid pink;
  display: grid;
  grid-template-columns: max-content 
  repeat(auto-fit, minmax(70px, 1fr));
  grid-auto-columns: 1fr;
}

.wrapper > *:nth-child(1) {
  background-color: purple;
  width: 200px;
}

.wrapper > *:nth-child(2) {
    background-color: orange;
} 
 <div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
</div>

GC = Grid-container .
GI = элемент сетки.

Я бы хотел, чтобы мой 2-й GI заполнил оставшееся пространство в строке 1. Однако, когда пространство, оставленное для 2-го GI в строке 1, достигает менее 70 пикселей, я хочу, чтобы он начал переносить его в новую неявную строку ниже, ширина которой охватывает контейнер (1fr).

Когда этот 2-й GI будет помещен в новую строку, я бы хотел внести в него изменения CSS. Есть ли в любом случае «обратить внимание» на это?

Chrome жалуется, что это недопустимое значение: введите описание изображения здесь

Комментарии:

1. Вы не можете, это не так, как работает css-grid

Ответ №1:

Это не задание CSS grid, это задание flexbox

 .wrapper {
  border: 5px solid pink;
  display: flex;
  flex-wrap:wrap;
}

.wrapper > *:nth-child(1) {
  background-color: purple;
  width: 200px;
}

.wrapper > *:nth-child(2) {
    background-color: orange;
    flex-basis:70px;
    flex-grow:1;
} 
 <div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
</div>

Комментарии:

1. Хорошо, посмотрел это видео (отметка 2 минуты) и подумал, что нечто подобное было достигнуто с помощью CSS-Grid youtube.com/watch?v=qjJR3qYCd54amp;t=366s

2. @tonitone120 не нужно это видеть, CSS grid не подходит для этого. забудьте CSS grid, если вы хотите иметь дело с переносом и элементами разной ширины.

3. Спасибо за ответ. Я хотел бы внести изменения во 2-й GI с помощью CSS, как только он будет помещен в свою собственную строку. Можете ли вы подумать о том, чтобы «обратить внимание» на это с помощью Flexbox или чего-нибудь еще?

4. @tonitone120 какие изменения вы ищете?

5. Каждый гибкий элемент, вероятно, будет его собственным flexbox, поэтому вносите изменения, чтобы его гибкие элементы располагались по-разному. Например, 2-й элемент, находясь в той же строке, что и первый, будет располагать свои гибкие элементы вертикально. Когда в его собственной строке он позиционирует свои элементы горизонтально.