2

Вот сетка из элементов в 3 колонки, но после 3 блока есть отступ 10рх из-за чего появляется нежелательное поле. Дело в том что если убрать это через nth-child(3n) то при сужении сетка рушится, как быть?

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none; }

p{
    border: 1px black solid;
}
.q1 div{
    background: black;
    width: 200px;
    height: 280px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.q1{
    border: 1px red solid;
    max-width:632px; 
    margin: auto;
     display: flex;
    flex-flow: row wrap;
    justify-content:center;
}
<div class="q1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

5
  • что значит нежелательное поле?
    – L. Vadim
    7 янв 2017 в 19:34
  • @L. Vadim Поле справа от каждого элемента div в контейнере. Нужно чтобы первый и последние элементы прилегали к границе контейнера, но при сужении когда столбцов становится 2 сетка не теряла форму.
    – PeGaS
    7 янв 2017 в 19:43
  • @L. Vadim Я сделал так: Убрал поле у каждого третьего блока и уменьшил ширину контейнера. Потом кода сетка рассыпалась, в медиазапросе вернул поле третьим блокам и убрал у вторых и т.д. Это считаеться правильным? вот jsfiddle.net/ckbLgjdc
    – PeGaS
    7 янв 2017 в 19:46
  • да хорошое решение
    – L. Vadim
    7 янв 2017 в 19:48
  • L. Vadim А не будет проблем с кроссбраузерностью? может когда у одного браузера медиазапрос сработает в одном месте а у другого в другом и получиться несостыковочка.
    – PeGaS
    7 янв 2017 в 19:55

2 ответа 2

2

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
}

.q1-w{    
  border: 1px solid #ff0000;
  margin: 0 auto;
  max-width: 632px;
}

.q1{
    display: flex;
    flex-flow: row wrap;
    justify-content:center;
    margin: -5px;
}

.q1-item-w{
    border: 5px solid transparent;
    width: 33.3333%;
}
.q1-item{
    background: black;
    height: 280px;
}
<div class="q1-w">
<div class="q1">
<div class="q1-item-w"><div class="q1-item"></div></div>
<div class="q1-item-w"><div class="q1-item"></div></div>
<div class="q1-item-w"><div class="q1-item"></div></div>
<div class="q1-item-w"><div class="q1-item"></div></div>
<div class="q1-item-w"><div class="q1-item"></div></div>
<div class="q1-item-w"><div class="q1-item"></div></div>
<div class="q1-item-w"><div class="q1-item"></div></div>
<div class="q1-item-w"><div class="q1-item"></div></div>
<div class="q1-item-w"><div class="q1-item"></div></div>
</div>

1
  • Спасибо но, то что сетка рушится так должно быть. Я про то что когда она рушится блоки становятся не ровно. Что если через точки останова подравнивать эти блоки добавляя поле и убирая в других вот так? jsfiddle.net/ckbLgjdc
    – PeGaS
    7 янв 2017 в 22:11
1

Самое простое решение - это для .q1 div дать margin-left: 5px; margin-right: 5px;

2
  • Но в таком случае крайние блоки не будут приживаться к границе
    – PeGaS
    7 янв 2017 в 20:21
  • насколько я вижу в вашем примере слева тоже есть отступ. и еще раз - я предложил самое простое, быстрое решение. оно не может быть идеальным, само собой это компромисс. 7 янв 2017 в 20:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.