CSS Grid и Flex — содержимое, выходящее за пределы указанных столбцов

Я пытаюсь создать страницу, используя сетку css и flex. Я определил области сетки и расположил их.

Когда я добавляю контент в blog-post-list раздел, содержимое выходит за <section> указанную область.

Я ожидаю, что 3-й и 4-й ящики blog-card перейдут в следующий ряд, а не в сторону. Разве он не должен действовать как контейнер, если в нем больше контента, его высота увеличивается?

ТИА

body{
  color: #000;
  text-align: center;
}

.content{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 2px;;
  max-width:960px;
  margin: 0 auto;
}

.content > *{
  background: #3bbced;
  padding: 30px;
}

header{
  grid-column: 1/13;
}
nav{
  grid-column: 1/13;
}

section{
  grid-column: 1/8;
  grid-row: 3/9;
}
aside{
  grid-column: 8 /13;
  grid-row: 3/9;
}

footer{
  grid-column: 1 / 13;
}

.blog-post-list{
  display: flex;
}

.blog-card{
  border: 1px solid black;
  padding: 20px;
  margin: 15px;
  min-width: 38%;
}

    <div class = "content">
    <header>
      header
    </header>
    <nav>
      Navigation
    </nav>
    <section>
      <div class = "blog-post-list">
        <div class = "blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
        <div class = "blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
        <div class = "blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
        <div class = "blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
      </div>
    </section>
    <aside>
      aside
    </aside>
    <footer>
      Footer
    </footer>     
  </div>

css flexbox css-grid

14.05.2022 14:29

Приемы 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

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

Вы должны изменить эту часть с помощью flex-wrap. Если вы хотите, чтобы все было в одной строке, вы должны указать меньший процент для дочерних элементов.

.blog-post-list{
  display: flex;
  flex-wrap: wrap;
}

body{
  color: #fff;
  text-align: center;
}

.content{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 2px;;
  max-width:960px;
  margin: 0 auto;
}

.content > *{
  background: #3bbced;
  padding: 30px;
}

header{
  grid-column: 1/13;
}
nav{
  grid-column: 1/13;
}

section{
  grid-column: 1/8;
  grid-row: 3/9;
}
aside{
  grid-column: 8 /13;
  grid-row: 3/9;
}

footer{
  grid-column: 1 / 13;
}

.blog-post-list{
  display: flex;
  flex-wrap: wrap;
}

.blog-card{
  border: 1px solid black;
  padding: 20px;
  margin: 15px;
  min-width: 38%;
}

<div class = "content">
    <header>
      header
    </header>
    <nav>
      Navigation
    </nav>
    <section>
      <div class = "blog-post-list">
        <div class = "blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
        <div class = "blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
        <div class = "blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
        <div class = "blog-card">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

        </div>
      </div>
    </section>
    <aside>
      aside
    </aside>
    <footer>
      Footer
    </footer>     
  </div>

Спасибо, я сосредоточился на том, есть ли какие-либо проблемы с областями, определенными сеткой, и я пропустил это. Спасибо Большое!

— 14.05.2022 14:47

14.05.2022 14:39