CSS Сетка Показать предметы в два раза - PullRequest
Новая
       21

CSS Сетка Показать предметы в два раза

0 голосов
/ 15 апреля 2020

пожалуйста, у меня небольшая проблема с моим CSS сеткой позиционирования. У меня есть четыре столбца со свойством auto-fit. Нет проблем, если у меня, например, монитор шириной более 1376 пикселей (также не проблема на мобильных устройствах, потому что тогда я показываю только один элемент в строке - как вы знаете, с другим соотношением пикселей). Но у меня есть проблема с монитором, который имеет ширину 1024 пикселей, например, затем я показываю 3 элемента, а во втором ряду только последний элемент, который выглядит очень плохо.

Фрагмент HML 

<div class="content">
    <div class="grid-box"> 
        <div class="grid-box-icon"><i class="fa fa-hands-wash"></i></div>
        <h2>Wash your hands</h2>
    </div>
    <div class="grid-box">
        <div class="grid-box-icon"><i class="fa fa-head-side-mask"></i></div>
        <h2>Cover your face</h2>
    </div>
    <div class="grid-box">
        <div class="grid-box-icon"><i class="fa fa-people-arrows"></i></div>
        <h2>Social distance</h2>
    </div>
    <div class="grid-box">
        <div class="grid-box-icon"><i class="fa fa-spray-can"></i></div>
        <h2>Sanitize common items</h2>
    </div>
</div>

И мой css фрагмент 

.content {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
    min-height: calc(50vh - 20pt);
}

.grid-box {
    margin: 10pt;
    padding: 20pt 10pt 0pt 20pt;
    text-align: center;
    background-color: rgba($color: #ccddcc, $alpha: 0.6);
    border-radius: 30px;
    border: 1px solid black;
}

Мой желаемый результат - показывать его только как близнецы. Не 3 элемента в первом столбце и последний во втором. Только все 4 элемента в одном ряду или если монитор меньше 2 элементов в первом ряду и 2 элементов во втором ряду.

Это возможно, пожалуйста, без использования media-query в css ? Да. Я знаю, что это возможно через media-query, но я считаю, что CSS Grid - это умный способ решить эту проблему без использования этого. Благодаря.

Ответы [ 3 ]

2 голосов
/ 15 апреля 2020

Вы можете сгруппировать два grid-box вместе в другом div и получить желаемый результат. `

<div class="content">
    <div class="content">
        <div class="grid-box"> 
            <div class="grid-box-icon"><i class="fa fa-hands-wash"></i></div>
            <h2>Wash your hands</h2>
        </div>
        <div class="grid-box">
            <div class="grid-box-icon"><i class="fa fa-head-side-mask"></i></div>
            <h2>Cover your face</h2>
        </div>
      </div>
      <div class="content">
        <div class="grid-box">
            <div class="grid-box-icon"><i class="fa fa-people-arrows"></i></div>
            <h2>Social distance</h2>
        </div>
        <div class="grid-box">
            <div class="grid-box-icon"><i class="fa fa-spray-can"></i></div>
            <h2>Sanitize common items</h2>
      </div>
    </div>
</div>

`

1 голос
/ 15 апреля 2020

Flex без медиазапроса ie также может быть вариантом здесь, так как никакие элементы не должны охватывать строку или столбец.

пример идеи, которая будет заключать элементы в 1, 2 или 4 строки : 

body {
  margin: 0;
}

.content {
  display: flex;
  flex-wrap: wrap;
}

.grid-box {
  margin: 10pt;
  padding: 20pt 10pt 0pt 20pt;
  text-align: center;
  background-color: rgba(204, 221, 204, .6);
  border-radius: 30px;
  border: 1px solid black;
  flex: 1;
  min-width: 350px;
  min-height: calc(50vh - 40pt);
}

.grid-box {/* optionnal, for the demo */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="content">
  <div class="grid-box">
    <div class="grid-box-icon"><i class="fa fa-hands-wash"></i></div>
    <h2>Wash your hands</h2>
  </div>
  <div class="grid-box">
    <div class="grid-box-icon"><i class="fa fa-head-side-mask"></i></div>
    <h2>Cover your face</h2>
  </div>
  <div class="grid-box">
    <div class="grid-box-icon"><i class="fa fa-people-arrows"></i></div>
    <h2>Social distance</h2>
  </div>
  <div class="grid-box">
    <div class="grid-box-icon"><i class="fa fa-spray-can"></i></div>
    <h2>Sanitize common items</h2>
  </div>
</div>
1 голос
/ 15 апреля 2020

Вы можете просто поместить каждые два деления в один, например: https://codepen.io/Aypro18/pen/OJyMVMq?editors=1100

CSS: 

.content {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
    min-height: calc(50vh - 20pt);

}

.grid-container{
  display: grid;
    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
    min-height: calc(50vh - 20pt);
}

.grid-box {
    margin: 10pt;
    padding: 20pt 10pt 0pt 20pt;
    text-align: center;
    background-color: rgba($color: #ccddcc, $alpha: 0.6);
    border-radius: 30px;
    border: 1px solid black;
  flex: 1 0 34%;
}

HTML: 

<div class="content">
  <div class="grid-container">
    <div class="grid-box"> 
        <div class="grid-box-icon"><i class="fa fa-hands-wash"></i></div>
        <h2>Wash your hands</h2>
    </div>
    <div class="grid-box">
        <div class="grid-box-icon"><i class="fa fa-head-side-mask"></i></div>
        <h2>Cover your face</h2>
    </div>
    </div>
  <div class="grid-container">
    <div class="grid-box">
        <div class="grid-box-icon"><i class="fa fa-people-arrows"></i></div>
        <h2>Social distance</h2>
    </div>
    <div class="grid-box">
        <div class="grid-box-icon"><i class="fa fa-spray-can"></i></div>
        <h2>Sanitize common items</h2>
    </div>
    </div>
</div>
...