Элемент стека CSS Grid без медиазапросов - PullRequest
0 голосов
/ 09 июня 2018

Я собираюсь сложить 2 столбца, как только они станут слишком "сжатыми" в окне просмотра с использованием сетки CSS.

Прямо сейчас у меня есть:

<style>
.grid{
    display: grid;
    grid-template-columns: 1fr 260px;
    grid-gap: 1em;

}
@media only screen and (min-width:600px) {
  .grid {
     grid-template-columns: 100% 100%;
  }
}
</style>

<div class="grid">
    <main>More stuff here...</main>
    <aside>Stuff inside here...</aside>
</div>

Кажется, что столбцы увеличиваются в ширину до 100%, а не укладываются в стопку.Есть ли способ сделать это без медиа-запроса?

Ответы [ 3 ]

0 голосов
/ 11 июня 2018

Кажется, что вы ищете автоматическое количество столбцов.

Синтаксис repeat в grid-template-columns позволяет использовать ключевое слово auto-fit .При использовании этого ключевого слова количество столбцов будет изменено таким образом, чтобы максимальная ширина столбца не перекрывала ширину сетки.

В фрагменте, установка максимальной ширины 300 пикселей делает сетку только одним столбцом, если ее размер550px:

.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(auto, 300px));
    grid-gap: 1em;
    border: solid 1px black;
    margin: 10px;
}

#grid1 {
  width: 550px;
}

#grid1 {
  width: 650px;
}

main {
    background-color: yellow;
}

aside {
    background-color: lightblue;
}
<div class="grid" id="grid1">
    <main>More stuff here...</main>
    <aside>Stuff inside here...</aside>
</div>
<div class="grid" id="grid2">
    <main>More stuff here...</main>
    <aside>Stuff inside here...</aside>
</div>
0 голосов
/ 11 июня 2018

Да, мы можем достичь этого, используя flex box

Вот пример кода, где мы можем переносить наши элементы на новую строку, когда она достигает определенной ширины, без записи какого-либо внешнего носителязапросы.

Только нам нужно сделать, это как применить указанные ниже свойства в родительском элементе

display: flex; flex-wrap: wrap; justify-content: start;

Даже это одно из преимуществ использования flex-box concept.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.column-1, .column-2, .column-3 {
  width: 250px;
  height: 100px;
  margin: 5px;
}
.column-1 {
  background: green;
}
.column-2 {
  background: red;
}
.column-3 {
  background: yellow;
}
<div class="container">
  <div class="column-1"></div>
  <div class="column-2"></div>
  <div class="column-3"></div>
</div>
0 голосов
/ 09 июня 2018

Использовать свойство flex вместо сетки

.grid{
  display: flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
...