Как получить div, чтобы заполнить весь экран (Masonry / Pinterest) макет - PullRequest
Новая
       43

Как получить div, чтобы заполнить весь экран (Masonry / Pinterest) макет

0 голосов
/ 16 сентября 2018

Два вопроса:

1) Почему столбцы в моем блоке не заполняют страницу (занимают пустое пространство), а не переполняются до следующего столбца? (Нажмите кнопку просмотра полной страницы при запуске фрагмента кода.)

2) Как сделать колонки более отзывчивыми? (то есть, чтобы при изменении размера экрана столбцы увеличивались и уменьшались, а не сужали каждый столбец влево или растягивали вправо). 

#container {
  /*min-height: 100vh;*/
  /*min-width: 100vw;*/
  grid-gap: 10px;
}

.columns {
  -moz-column-count: 5;
  -moz-column-gap: 1em;
  -moz-column-width: 40%;
  -webkit-column-count: 5;
  -webkit-column-gap: 1em;
  -webkit-column-width: 40%;
  column-count: 5;
  column-gap: 1em;
  column-width: 40%;
}

.box {
  margin-bottom: 10px;
}

.box.one {
  height: 230px;
  background-color: grey;
}

.box.two {
  height: 230px;
  background-color: grey;
}

.box.three {
  background-color: pink;
  height: 230px;
}

.box.four {
  background-color: grey;
  height: 180px;
}

.box.five {
  background-color: orange;
  height: 170px;
}

.box.six {
  background-color: grey;
  height: 180px;
}

.box.seven {
  background-color: grey;
  height: 200px;
}

.box.eight {
  background-color: blue;
  height: 200px;
}

.box.nine {
  background-color: grey;
  height: 200px;
}

.box.ten {
  background-color: green;
  height: 200px;
}

.box.eleven {
  background-color: grey;
  height: 200px;
}

.box.twelve {
  background-color: grey;
  height: 200px;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<div id="container" class="columns">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
  <div class="box four">4</div>
  <div class="box five">5</div>
  <div class="box six">6</div>
  <div class="box seven">7</div>
  <div class="box eight">8</div>
  <div class="box nine">9</div>
  <div class="box ten">10</div>
  <div class="box eleven">11</div>
  <div class="box twelve">12</div>
</div>

Я пытаюсь создать страницу входа / выхода, например Pinterest. Вот кодекс .

Я попытался повозиться с максимальной / минимальной высотой / шириной и установить 100%, 100px, 100vh / vw, но ничего не получается.

Что я не так делаю? Пожалуйста, помогите, спасибо!

1 Ответ

0 голосов
/ 16 сентября 2018

Чтобы сделать его отзывчивым в зависимости от размера экрана, необходимо добавить медиазапрос, например: 

@media(max-width:700px){
}

что он будет делать, это обнаруживать, когда ширина экрана составляет 700 пикселей или меньше, и внутри вы просто помещаете то, что вы хотите, чтобы ваш сайт выглядел, если в этом случае. Так, например, если, естественно, у вас есть div, который на компьютере имеет половинную ширину, вы бы сделали: 

div {
    width: 50%;
}

тогда, если вы находитесь на экране телефона и хотите увеличить ширину экрана, просто добавьте: 

div {
    width: 50%;
}
@media(max-width:600px) {
    div {
         width: 100%;
    }
}

и это изменится соответственно, надеюсь, это поможет!

...