Вырваться с сеткой CSS - PullRequest
Новая
       28

Вырваться с сеткой CSS

2 голосов
/ 25 апреля 2019

Следуя методике, описанной в этом сообщении в блоге Я попытался создать сетку CSS, где мои изображения будут шире, чем центрированный текстовый столбец.Однако я не могу заставить это работать, и я не уверен почему.

Мой HTML: 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<main class="grid">
  <div>
    <p>Lorem ipsum [...]</p>

    <p class="full"><a href="#"><img src="https://via.placeholder.com/500x250"></a></p>

    <p>Lorem ipsum [...]</p>
  </div>
</main>
</body>
</html>

И CSS: 

img {
    width: 100%;
}

.grid {
    display: grid;
    grid-gap: 20px;
    grid-auto-rows: 150px;
    grid-template-columns: 
        [full-start] minmax(1em,1fr)
        [main-start] minmax(0, 40em) [main-end]
        minmax(1em,1fr) [full-end];
}

.grid > * {
  grid-column: main ;
}

.full {
  grid-column: full;
}

На моем компьютере (Google Chrome, Windows) отображается этот снимок экрана, на котором изображение отсутствует.растянуто на полную ширину:

Image not breaking out grid

Сначала я хотел бы получить эту работу, так как я хочу иметь макет с тремя ширинами: полная ширина, wide и text (main) width: 

|     |      | text width |      |      |
|     |      | text width |      |      |
|     |                          |      |
|     |  ---   image width  ---  |      |
|     |                          |      |
|     |      | text width |      |      |
|     |      | text width |      |      |
|                                       |
|  ---------   full width    ---------  |
|                                       |
|     |      | text width |      |      |
|     |      | text width |      |      |

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

Я просто сделал опечатку, которую не могу найти, или это ошибка где-то еще?

1 Ответ

1 голос
/ 25 апреля 2019

Свойства сетки влияют на элементы сетки , которые являются прямыми дочерними элементами контейнера сетки (это похоже на flexbox).Здесь у вас есть дополнительная div оболочка внутри main контейнера сетки - удалите это: 

img {
  width: 100%;
}

.grid {
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: 150px;
  grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 40em) [main-end] minmax(1em, 1fr) [full-end];
}

.grid>* {
  grid-column: main;
}

.full {
  grid-column: full;
}
<main class="grid">
  <!-- <div> -->
    <p>Lorem ipsum [...]</p>

    <p class="full">
      <a href="#"><img src="https://via.placeholder.com/500x250"></a>
    </p>

    <p>Lorem ipsum [...]</p>
  <!-- </div> -->
</main>

Теперь ваше изображение превышает его контейнер - вы можете использовать object-fit на изображении - см. Модифицированную демонстрацию: 

img {
  width: 100%;
  height: 100%; /* added */
  object-fit: cover; /* added */
}

.grid {
  display: grid;
  grid-gap: 20px;
  grid-auto-rows: 150px;
  grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 40em) [main-end] minmax(1em, 1fr) [full-end];
}

.grid>* {
  grid-column: main;
}

.full {
  grid-column: full;
}
<main class="grid">
  <!-- <div> -->
    <p>Lorem ipsum [...]</p>

    <p class="full">
      <a href="#"><img src="https://via.placeholder.com/500x250"></a>
    </p>

    <p>Lorem ipsum [...]</p>
  <!-- </div> -->
</main>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...