Элементы не переносятся в CSS Grid

Всем привет,

Довольно новичок в веб-разработке, я пытаюсь научиться использовать красивый инструмент сетки css, но на самом деле я застрял с этим:

Я хочу, чтобы мои карты автоматически перемещались одна за другой в следующей строке (с тем же шаблоном столбца), но на самом деле я вижу только одну карту в своем браузере.

Я думал, проблема в моем росте .wrapper в vh. Я пробовал px и %, но я действительно застрял, чтобы найти решение.

Я был бы очень признателен, если бы у кого-то были идеи по поводу проблемы или какие-либо комментарии относительно моего (плохого... или хорошего?) способа кодирования!

/* Just some horrible stylization to better see boxes */

body {
  padding: 0px;
  margin: 0px;
}

div {
  background-color: #f1c40f;
  border: 1px solid white;
}

/* Definition of the 3 grids used*/

.wrapper {
  height: 100vh;
  box-sizing: border-box;
  display: grid;
  align-content: stretch;
  justify-content: stretch;
  grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr;
  grid-template-rows: 1fr 5fr 1fr;
  grid-template-areas: "header header header header header header header"
                       "main main main main main main main"
                       "footer footer footer footer footer footer footer"
}

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 60px 7fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "sidebar box-content box-content";
}

/* This box-content's grid-template-columns have many ones, it is done to modify
only the grid-template-areas with media-queries for larger screen*/

.box-content {
  grid-area: box-content;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr;
  grid-template-rows: 1fr 7fr 1fr;
  grid-auto-flow: row;
  grid-template-areas: ". . . . . . . . ."
                       ". card card card card card card card."
                       ". . . . . . . . .";
}

/* Definition of the different element's grid-area*/

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}


.card {
  grid-area: card;
}

.footer {
  grid-area: footer;
}
 <!-- I apologize for non-semantic tags, only a quick prototyping -->

  <div class="wrapper">
    <div class="header"> Header Header Header Header Header</div>
    <div class="main">
      <div class="sidebar">Sidebar Sidebar </div>
      <div class="box-content">
        <div class="card"> Card Card Card Card Card Card </div>
        <div class="card"> Card Card Card Card Card Card </div>
        <div class="card"> Card Card Card Card Card Card </div>
        <div class="card"> Card Card Card Card Card Card </div>
      </div>
    </div>
    <div class="footer"> Footer Footer Footer Footer Footer </div>
  </div>

Спасибо


html layout css css-grid
person Halkeand    schedule 03.09.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Чтобы ваши карточки переносились построчно, используйте функции auto-fit и minmax.

Вот полное объяснение: Получение переноса столбцов в CSS Grid

Вот базовая демонстрация: jsFiddle (измените ширину браузера, чтобы увидеть эффект)

Вот демо-код:

.wrapper {
  height: 100vh;
  display: grid;
  align-content: stretch;
  justify-content: stretch;
  grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr;
  grid-template-rows: 1fr 5fr 1fr;
  grid-template-areas: "header header header header header header header"
                       "main main main main main main main"
                       "footer footer footer footer footer footer footer"
}

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 60px 7fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "sidebar box-content box-content";
}

.box-content {
  grid-area: box-content;
  align-items: start;
  align-content: start;
  display: grid;
  grid-gap: 10px;
  padding: 10px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }


body {
  padding: 0px;
  margin: 0px;
}

div {
  background-color: #f1c40f;
  border: 1px solid white;
}
* { 
  box-sizing: border-box;
}
<div class="wrapper">
  <div class="header"> Header Header Header Header Header</div>
  <div class="main">
    <div class="sidebar">Sidebar Sidebar </div>
    <div class="box-content">
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>
      <div class="card"> Card Card Card Card Card Card </div>      
    </div>
  </div>
  <div class="footer"> Footer Footer Footer Footer Footer </div>
</div>

person Michael Benjamin    schedule 03.09.2017

arrow_upward
0
arrow_downward 

/* Just some horrible stylization to better see boxes */

body {
  padding: 0px;
  margin: 0px;
}

div {
  background-color: #f1c40f;
  border: 1px solid white;
}

/* Definition of the 3 grids used*/

.wrapper {
  height: 100%;
  box-sizing: border-box;
  
  align-content: stretch;
  justify-content: stretch;
  grid-template-columns: 2fr 1fr 3fr 1fr 3fr 1fr 2fr;
  grid-template-rows: 1fr 5fr 1fr;
  grid-template-areas: "header header header header header header header"
                       "main main main main main main main"
                       "footer footer footer footer footer footer footer"
}

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 60px 7fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "sidebar box-content box-content";
}

/* This box-content's grid-template-columns have many ones, it is done to modify
only the grid-template-areas with media-queries for larger screen*/

.box-content {
  grid-area: box-content;
  grid-template-rows: 1fr 7fr 1fr;
  grid-auto-flow: row; padding:20px;
  
  
}

/* Definition of the different element's grid-area*/

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}


.card-1 {
  display: grid;
  width: 100%; margin-bottom:20px; min-height:500px;
 
  
}

.footer {
  grid-area: footer;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Layout 1</title>
</head>
<body>

  <!-- I apologize for non-semantic tags, only a quick prototyping -->

  <div class="wrapper">
    <div class="header"> Header Header Header Header Header</div>
    <div class="main">
      <div class="sidebar">Sidebar Sidebar </div>
      <div class="box-content">
        <div class="card-1"> Card Card Card Card Card Card </div>
        <div class="card-1"> Card Card Card Card Card Card </div>
        <div class="card-1"> Card Card Card Card Card Card </div>
        <div class="card-1"> Card Card Card Card Card Card </div>
      </div>
    </div>
    <div class="footer"> Footer Footer Footer Footer Footer </div>
  </div>
</body>
</html>

не могли бы вы проверить свое решение

и другие примеры - https://gridbyexample.com/examples/

person Sanjay Prajapati    schedule 03.09.2017
comment
Эй, спасибо за ответ и ссылку, я обязательно это сделаю, но я думаю, что должен уточнить, что я хочу сделать (мой английский не самый лучший), и изображение - лучший способ, я думаю: Изображение. Я хотел бы, чтобы все карточки располагались в среднем столбце, строка за строкой (и добавлялось переполнение: прокрутите .box-content - person Halkeand; 03.09.2017