Как использовать CSS для создания адаптивного макета сайта с тремя колонками?

Для создания адаптивного макета сайта с тремя колонками в CSS можно использовать, например, CSS Grid Layout. 13

Некоторые возможности:

• Свойство grid-template-columns. 4 В нём указывается размер каждой колонки через пробел. 4 Например, можно создать три колонки по 100 px каждая: grid-template-columns: 100px 100px 100px. 4
• Свойство grid-template-rows. 4 Оно отвечает за ряды. 4 Можно задать высоту рядам по 100 px: grid-template-rows: 100px 100px 100px. 4
• Свойства grid-column-gap и grid-row-gap. 4 Они помогают добавить пространство между колонками и рядами. 4 Эти свойства можно объединить в grid-gap: 20px 30px, где первое значение — отступ между рядами, а второе — между колонками. 4
• Фракция (fr). 34 Это специальная единица измерения CSS Grid для создания адаптивного макета. 4 Если определить три колонки шириной 1 фракция каждая (1fr), то колонки будут равномерно делить ширину экрана или свободного для них пространства и занимать по 1 части каждая. 4
• Свойства auto-fill и auto-fit. 14 Они позволяют автоматически создавать колонки или строки. 1 auto-fill создаёт колонки по размеру контейнера, даже если в них нет контента. 1 auto-fit подгоняет количество колонок под контент. 1

Для правильного отображения макета на разных экранах можно использовать медиа-запросы и Bootstrap для контроля над расположением колонок. 2

Важно тестировать макеты в разных браузерах и на разных устройствах. 2