CSS Grid — установить ширину элемента при наведении

Я создаю простой макет сетки CSS, который выглядит так...

.container {
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
}

.col1 {
  padding:20px;
  background:red;
  color:white;
  text-align:center;
}

.col2 {
  padding:20px;
  background:green;
  color:white;
  text-align:center;
}

.col3 {
  padding:20px;
  background:blue;
  color:white;
  text-align:center;
}

.col4 {
  padding:20px;
  background:gray;
  color:white;
  text-align:center;
}

<div class = "container">

  <div class = "col1">
    Column 1
  </div>

  <div class = "col2">
    Column 2
  </div>

  <div class = "col3">
    Column 3
  </div>

  <div class = "col4">
    Column 4
  </div>

</div>

Я пытаюсь сделать так, чтобы при наведении курсора на любой из столбцов они меняли ширину так, чтобы наведенный столбец занимал 2fr.

Я знаю, что с помощью flexbox я могу установить ширину элемента в самом элементе, но с сеткой я устанавливаю ширину элемента в контейнере.

Есть ли способ установить их на предметы?

Вы пробовали: .container>div:hover {width:40vw} проверить, как ведет себя ваша сетка?

— 17.06.2019 09:59

связанные: stackoverflow.com/a/54834180/8620333 (вероятно то, что вы ищете)

— 17.06.2019 10:14

Прежде всего, вы можете использовать grid-column: 2 на зависшем элементе. Теперь вы можете переключить направление потока элемента сетки на столбец с помощью grid-auto-flow: column; и установите для неявных столбцов значение 1fr, используя grid-auto-columns: 1fr - при наведении курсора теперь у вас будет 5 столбцов, а парил заберет из него 2fr... см. jsfiddle.net/anz3e2t5 (если это ожидаемый результат, он будет преобразован в ответ)

— 17.06.2019 10:42

ожидаемый результат тот же, что и в скрипке в комментарии выше?

— 18.06.2019 02:53

css css-grid

17.06.2019 09:44

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 918

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сделать это с помощью свойства grid-column. Он принимает два целых числа, начальную и конечную дорожки (например, 1/3). Загвоздка в том, что вы не можете расширить последний столбец без дополнительной работы, потому что он переходит на следующую строку, за пределы диапазона начальной зоны наведения:

Обновлено: Согласно комментарию ниже, я обновил код наведения, чтобы он был: grid-column: span 2; Это то же самое, что и «начать с начальной дорожки и охватить 2 столбца». Это немного чище, поскольку позволяет вам установить одно правило стиля для каждого столбца. Я также добавил в правило :not(.col4), чтобы избежать вышеупомянутой проблемы с переходом столбца на следующую строку. Конечно, вам нужно дать каждому столбцу один и тот же класс «col», чтобы это работало:

.container {
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
}

.col1 {
  padding:20px;
  background:red;
  color:white;
  text-align:center;
}

.col2 {
  padding:20px;
  background:green;
  color:white;
  text-align:center;
}

.col3 {
  padding:20px;
  background:blue;
  color:white;
  text-align:center;
}

.col4 {
  padding:20px;
  background:gray;
  color:white;
  text-align:center;
}

.col:not(.col4):hover{
   grid-column: span 2;
}

<div class = "container">

  <div class = "col1 col">
    Column 1
  </div>

  <div class = "col2 col">
    Column 2
  </div>

  <div class = "col3 col">
    Column 3
  </div>

  <div class = "col4 col">
    Column 4
  </div>

</div>

Спасибо за это, это заставило меня подумать, что flexbox может лучше соответствовать моим потребностям.

— 17.06.2019 09:57

На самом деле, лучше установить grid-column: span 2 при наведении курсора, чем устанавливать фиксированные диапазоны столбцов.

— 17.06.2019 15:33

@VadimOvchinnikov Согласен, так лучше! Пожалуйста, смотрите мое редактирование.

— 17.06.2019 19:08

17.06.2019 09:52