Как сделать «квадраты» одного размера?
У меня есть код html
<div class="services-content"> <div class="box"> <div class="s-icons"> <i class='bx bxl-figma' ></i> </div> <h3>Веб-дизайн</h3> <P>неравномерный текст</P> </div> <div class="box"> <div class="s-icons"> <i class='bx bxl-blender'></i> </div> <h3>Blender</h3> <P>неравномерный текст</P> </div> <div class="box"> <div class="s-icons"> <i class='bx bxl-adobe'></i> </div> <h3>Анимации</h3> <P>неравномерный текст.</P> </div> </div> |
<div class="services-content"> <div class="box"> <div class="s-icons"> <i class='bx bxl-figma' ></i> </div> <h3>Веб-дизайн</h3> <P>неравномерный текст</P> </div> <div class="box"> <div class="s-icons"> <i class='bx bxl-blender'></i> </div> <h3>Blender</h3> <P>неравномерный текст</P> </div> <div class="box"> <div class="s-icons"> <i class='bx bxl-adobe'></i> </div> <h3>Анимации</h3> <P>неравномерный текст.</P> </div> </div>
У меня есть код css
.services-content{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, auto)); align-items: center; gap: 2.5rem; margin-top: 5rem; } .box{ background: #ffffff; padding: 35px 45px; border-radius: 8px; transition: all .45s ease; } .s-icons i{ font-size: 22px; margin-bottom: 20px; } .box h3{ font-size: 24px; font-weight: 600; color: #ff7b00; margin-bottom: 15px; } .box p { font-size: 1rem; line-height: 1.8; margin-bottom: 25px; } |
.services-content{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, auto)); align-items: center; gap: 2.5rem; margin-top: 5rem; } .box{ background: #ffffff; padding: 35px 45px; border-radius: 8px; transition: all .45s ease; } .s-icons i{ font-size: 22px; margin-bottom: 20px; } .box h3{ font-size: 24px; font-weight: 600; color: #ff7b00; margin-bottom: 15px; } .box p { font-size: 1rem; line-height: 1.8; margin-bottom: 25px; }
Это все выглядит вот так:
мне нужно, чтобы в независимости от объема они были одинакового размера. Подскажите, пожалуйста, как это сделать ! :)
Дополнительно:
если надо по высоте выровнять то добавь в .box align-self: stretch;, и отступы в .services-content padding: 0 2.5rem;
Ответы:
Одно из возможных решений заменить grid на flex:
.services-content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } |
.services-content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; }
Удалите свойство grid-template-columns из .services-content.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы создать "квадраты" одного размера, вам нужно использовать CSS для задания размеров и стилей элементов. Вот пример того, как это можно сделать:
1. Создайте контейнер для ваших "квадратов" с помощью HTML:
<div class="container"> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div>
2. Задайте стили для контейнера и "квадратов" с помощью CSS:
.container { display: flex; } .square { width: 100px; height: 100px; background-color: blue; margin: 10px; }
3. Теперь у вас будет контейнер, содержащий три "квадрата" одинакового размера (ширина и высота 100px). Вы можете изменить размеры "квадратов", цвета и другие стили по вашему усмотрению, просто изменяя значения свойств в CSS.
Этот код создаст "квадраты" одного размера и выровняет их горизонтально благодаря использованию flexbox. Не забудьте добавить дополнительные стили или свойства, если вам нужно изменить внешний вид ваших "квадратов".