CSS -Сетка начинается со следующего столбца - PullRequest
Новая
       5

CSS -Сетка начинается со следующего столбца

0 голосов
/ 20 февраля 2020

У меня есть 3 столбца css сетка с содержимым. Я пытаюсь сделать так: если контента слишком много, он должен go перейти к следующему столбцу.

Но я не мог заставить это работать. У вас есть какие-нибудь намеки? 

.details {
        background: #000;
        color: #fff;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(1, 100%);
        grid-column-gap: 2px;
        grid-row-gap: 2px;
        .detail {
          text-align: left;
          padding: 10px;
        }
}

Css Grid Columns

1 Ответ

0 голосов
/ 20 февраля 2020

Вы можете использовать столбец CSS и плавающие псевдоэлементы, чтобы максимально увеличить содержание sh по отношению к первым столбцам:

возможные примеры для запуска и тестирования на полной странице :

  • 3 столбца из подсчета столбцов 

body {
  margin: 0;
}

div {
  column-count: 3;
}

div p::before {
  content: '';
  padding-bottom: 90vh;
  float: left;
}


/* extra styling */

div {
  column-rule: double gray;
  margin: 1em;
  border: solid;
  box-sizing: border-box;
  background: rgb(243, 241, 121);
}

div h1,
p {
  width: 80%;
  margin: 1em auto;
  text-indent: 1em;
  text-align: justify;
}
<div>
  <h1>Column CSS</h1>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>
  • или установка column-width вместо column-count для адаптивного поведения: 

body {
  margin: 0;
}

div {
  column-width: 18em;
}

div p::before {
  content: '';
  padding-bottom: 90vh;
  float: left;
}


/* extra styling */

div {
  column-rule: double gray;
  margin: 1em;
  border: solid;
  box-sizing: border-box;
  background: rgb(243, 241, 121);
}

div h1,
p {
  width: 80%;
  margin: 1em auto;
  text-indent: 1em;
  text-align: justify;
}
<div>
  <h1>Column CSS</h1>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    Mauris placerat eleifend leo.</p>

, вероятно, не так совершенен, как вы себе представляете: демонстрационная версия codepen для игры с

...