0

Сначала думал, что это можно сделать через таблицы, потом понял, что не вариант. Можно было бы сделать каждый элемент отдельно, но тогда из-за паддингов начнутся проблемы с бордер, как лучше сделать их? я подключил только bootstrap-grid.

скрин

2
  • Используйте обычную сетку 26 мая 2019 в 9:51
  • По моему мнению вопросы "как это сделать" не относятся к SO, у вас должна быть конкретная проблема, как минимум попытка реализации
    – user245150
    28 мая 2019 в 15:43

2 ответа 2

1

Тоже самое можно сделать и с бутстраповскими колонками

*{
  box-sizing: border-box;
}
.row{
  display:flex;
  flex-wrap:wrap;
}
.item{
  width: calc(100% / 3);
  border-right:1px solid;
  padding-top: calc(100% / 3)
}
/*убираем правую границу у каждого третьего, т.е. крайнего справа элемента*/
.item:nth-child(3n){
  border-right:none;
}
/*добавляем верхнюю границу начиная с 4 элемента */
.item:nth-child(n+4){
  border-top:1px solid;
}
<div class="row">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

1

Стандартная разметка, пунктам задаем обводку по левому и нижнему краю со смещением в те же стороны на толщину обводки, а обертки для этих пунктов задаем overflow: hidden;, чтобы обрезать лишнее:

.item {
  padding: 2rem;
  font-size: .75rem;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-left: -1px;
  margin-bottom: -1px;
}

.section-inner {
  overflow: hidden;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  
<div class="section text-center py-4">
  <div class="container">
    <div class="section-inner">
      <div class="row no-gutters">
        <div class="col-sm-6 col-md-4">
          <div class="item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae.
            </p>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae.
            </p>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae.
            </p>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae.
            </p>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae.
            </p>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Ваш ответ

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

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