Как создать адаптивные колонки? 

Добрый день! Можете, пожалуйста, объяснить, как создать адаптивные резиновые колонны с использованием гридов? Я понимаю общую концепцию, но не могу разобраться в деталях. Заранее благодарю! 

Вот ссылка на пример: <a href="https://msttestaddfiles.netlify.app/" rel="nofollow">https://msttestaddfiles.netlify.app/</a> 

Также прилагаю текущую структуру HTML кода: 
<pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;section class="container"&gt;
      &lt;div class="block__video"&gt;
        &lt;p class="text"&gt;We`re here&lt;/p&gt;
        &lt;video loop autoplay class="video__item" src="video/video.mp4"&gt;&lt;/video&gt;
        &lt;p class="text"&gt;to make&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="block__video"&gt;
        &lt;p class="text"&gt;healthy&lt;/p&gt;
        &lt;video loop autoplay class="video__item" src="video/video.mp4"&gt;&lt;/video&gt;
        &lt;p class="text"&gt;living effortless&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="block__video"&gt;
        &lt;p class="text"&gt;so you can&lt;/p&gt;
        &lt;video loop autoplay class="video__item" src="video/video.mp4"&gt;&lt;/video&gt;
        &lt;p class="text"&gt;live longer&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="block__video"&gt;
        &lt;p class="text"&gt;and happier&lt;/p&gt;
        &lt;video loop autoplay class="video__item" src="video/video.mp4"&gt;&lt;/video&gt;
      &lt;/div&gt;
    &lt;/section&gt;

    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
  • 26 января 2025 г. 20:54
Ответы на вопрос 1 
Чтобы создать адаптивные (резиновые) колонки с использованием CSS Grid, вам нужно будет настроить свой контейнер и элементы внутри него. Я замечу, что у вас уже есть основная структура HTML, поэтому я просто добавлю CSS, чтобы сделать ваши колонки адаптивными.

Вот как это сделать:

### CSS

В вашем `style.css` добавьте следующий код для настройки сетки:

```css
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px; /* расстояние между колонками */
  padding: 20px;
}

.block__video {
  background-color: #f1f1f1; /* цвет фона для блоков */
  border-radius: 8px; /* углы блока */
  padding: 10px; /* отступы внутри блока */
  text-align: center; /* выравнивание текста по центру */
}

.video__item {
  width: 100%; /* делаем видео адаптивным */
  height: auto; /* высота автоматически подстраивается под ширину */
  border-radius: 5px; /* радиус углов видео */
}
```

### Пояснение

1. **Grid Layout**: `display: grid;` указывает, что мы используем грид. 
2. **Автоматическая настройка колонок**: `grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));` создает столько колонок, сколько поместится в контейнер с минимальной шириной 250 пикселей и максимально зная до 1fr (фракция свободного пространства). Это означает, что колонки будут уменьшаться или увеличиваться в зависимости от ширины контейнера.
3. **Отступы и пробелы**: `gap: 20px;` создает пробелы между колонками и строками.
4. **Стилизация блоков**: Задаем фоновый цвет и отступы для каждого блока с видео.
5. **Адаптивность видео**: `width: 100%;` заставляет видео занимать всю ширину блока, а высота будет автоматически подстраиваться.

### Примерный результат

С этими стилями, блоки в вашей секции "container" будут равномерно распределены по ширине и будут адаптироваться к размерам экрана, сохраняя при этом свои пропорции.

### Завершение

Теперь вам достаточно лишь включить этот CSS в ваш `style.css`, и у вас будут адаптивные колонки с видео. Не забывайте тестировать на разных разрешениях экрана, чтобы убедиться, что все отображается так, как вы ожидаете.
Похожие вопросы
    Показать ещё