Картинки_Вопрос_Ответ_1

by User65659

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<!-- body --- --- --- --- --- --- --- --- --- -->
<body>
<div class="container-fluid bg-primary">
  <div class="row bg-primary">
    <!-- Col-1 === === === === === === === === === === === -->
    <div class="col-6 bg-danger sidebar">      
          Column-Left
          <div class="row ">
            <div class="col-5 block">      
                <h2>Наименование </h2>
                <h5>Описание объекта</h5>                
            </div>
          </div>
          <hr/>
          <!-- hr -- --- --- --  -->
          
          <div class="row ">                    
          <!-- hr   <div class="d-grid gap-2 col-6 mx-auto"> -->
          <div class="d-grid gap-2 col-6 mx-auto">
              <button class="btn btn-primary" type="button">Кнопка-1. Описание</button>
              <button class="btn btn-primary" type="button">Кнопка-2. Описание длинное, длинное </button>
              <button class="btn btn-primary" type="button">Кнопка-3. Описание</button>
          </div>
          </div>
          <hr/>
          <!-- hr -- --- --- --  -->
            <div class="row">
            <p> 
            Строка-1. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br>
            Строка-2. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br> 
            Строка-3. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br> 
            Строка-4. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br> 
            Строка-5. Текст Текст Текст Текст Текст Текст  Текст Текст Текст  Текст Текст Текст <br>...

CSS

.sidebar {
  /*position: fixed;*/
  height: 100vh;
}

.block {
  margin-left: auto;
  margin-right: auto;
}


/*Размеры кнопки. На всякий случай*/
.btn-circle {
    width: 270px;
    height: 100px;
    border-radius: 0;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    font-size: 50px;
}

img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

.box {
  width: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 250px;
  grid-gap: 30px;
}

.box__item {
  background: #ff0000;
  grid-column: 1 span;
}

.box__item:nth-child(1) {
  grid-column: 2 span;
  grid-row: 2 span;
}

.box__item:nth-child(3) {
  grid-column: 1 span;
  grid-row: 2 span;
}

.box__item:nth-child(4) {
  grid-column: 2 span;
}