Ширина изображения превышает ширину контейнера при использовании функции сетки CSS

В настоящее время я работаю над некоторым макетом, и у меня есть проблема с шириной изображения, превышающей ширину контейнера при применении правил сетки CSS.

Пожалуйста, взгляните на код ниже.

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page {
  display: grid;
  grid-template-columns: auto minmax(300px, 400px);
  grid-column-gap: 1rem;
  height: 100vh;
}

.content {
  grid-column: 1 / 2;
  background: red;
  width: 100%;
}

.sidebar {
  grid-column: 3;
  background: lime;
}
<div class="page">
  <div class="content">
    <img src="http://via.placeholder.com/900x400" alt="" width="900" height="400">
    <p>content</p>
  </div>
  <div class="sidebar">
    <p>sidebar</p>
  </div>
</div>

Мне интересно, что может вызвать эту проблему. Боковая панель должна быть между 300px и 400px. Контейнер содержимого должен взять на себя все остальное. По какой-то причине изображение нарушает эту настройку макета.

https://codepen.io/sunpietro/pen/ZyNgqe


css css-grid
person sunpietro    schedule 18.07.2017    source источник
comment
Вы все еще ищете ответ? Если я неправильно понял ваш вопрос, просто дайте мне знать.   -  person Michael Benjamin    schedule 20.07.2017
comment
@Michael_B да, я все еще ищу ответ. Тем временем я исправил это, установив фиксированную ширину для контейнера контента. По какой-то причине, когда в grid-template-columns есть значение auto, контейнер содержимого пытается быть той же ширины, что и его содержимое (что больше, чем должен быть контейнер)   -  person sunpietro    schedule 20.07.2017
comment
Вы пробовали 1fr вместо auto?   -  person Michael Benjamin    schedule 20.07.2017

Ответы (2)


arrow_upward
0
arrow_downward

Исправлено grid-template-columns. Это должно be grid-template-columns: auto 1fr minmax(300px, 400px). auto для изображения, 1fr для content и minmax(300px, 400px) forбоковая панель` (она находится в 3-м столбце). Демо:

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page {
  display: grid;
  grid-template-columns: auto 1fr minmax(300px, 400px);
  grid-column-gap: 1rem;
  height: 100vh;
}

.content {
  grid-column: 1 / 2;
  background: red;
  width: 100%;
}

.sidebar {
  grid-column: 3;
  background: lime;
}
<div class="page">
  <div class="content">
    <img src="http://via.placeholder.com/900x400" alt="" width="900" height="400">
    <p>content</p>
  </div>
  <div class="sidebar">
    <p>sidebar</p>
  </div>
</div>

person Vadim Ovchinnikov    schedule 18.07.2017

arrow_upward
0
arrow_downward

У вас есть сетка из двух столбцов.

grid-template-columns: auto minmax(300px, 400px);

Это означает, что есть три линии столбца сетки: 1, 2 и 3.

Изображение вложено в элемент сетки, который занимает первый столбец:

.content {
   grid-column: 1 / 2;
}

Но у вас есть боковая панель, пропускающая второй столбец и начинающаяся с строки столбца сетки 3 (конец явной сетки):

.sidebar {
  grid-column: 3;
}

Это разбивается на:

grid-column-start: 3;
grid-column-end: auto;

Итак, во втором столбце ничего нет.

Попробуйте это вместо этого:

.sidebar {
    grid-column: 2 / 3;
}

пересмотренный код

person Michael Benjamin    schedule 18.07.2017