0

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

скрин

2
  • Используйте обычную сетку Commented 26 мая 2019 в 9:51
  • По моему мнению вопросы "как это сделать" не относятся к SO, у вас должна быть конкретная проблема, как минимум попытка реализации
    – user245150
    Commented 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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