Макет из трёх колонок

На странице демонстрация всех существующих макетов, состоящих из трех колонок. Макеты с семантикой HTML и легко адаптируются под разные размеры мобильных устройств используя только свойства CSS.

Оглавление:
  1. Макет из трех колонок таблицей HTML
  2. Макет из трёх колонок слева и справа
  3. Три колонки с относительной позицией
  4. Макет из трёх колонок с отступом
  5. Макет в три колонки HTML5 и CSS3 flex
  6. Макет три колонки HTML5 и CSS3 flex grid
  7. Макет на три колонки CSS calc ()
  8. Макет в три колонки display table
  9. Заключение
Макет с семантикой HTML5
Макет для сайта из трех колонок

Макет из трех колонок таблицей HTML

Самый простой способ создать макет из трех колонок создать таблицу HTML. Преимущество макета поддержка всеми существующими браузерами. Проблема макета адаптировать под разные размеры экрана без дополнительных библиотек JavaScript.

HTML

<table>
 <tbody>
  <tr>
    <th colspan="3" class="header">
        <h1>Заголовок</h1>
        <h2>Верхний колонтитул</h2>
    </th>
  </tr>
  <tr>
    <td class="sidebar"><h3>Колонка 1</h3></td>
    <td class="article"><h1>Колонка 2</h1></td>
    <td class="aside"><h3>Колонка 3</h3></td>
  </tr>
  <tr>
    <td colspan="3" class="footer">
       <h4>Нижний колонтитул</h4>
    </td>
  </tr>
  </tbody>
</table>

CSS

table {
	width: 100%;
	text-align: center;
}
td {
	vertical-align: top;
}
.header, .footer {
	background: #f0e68c;
	height: 100px;
}
.article {
	background: #afccdb;
}
.sidebar, .aside {
	width: 250px;
	background: #fc0;
}
.footer {
	background: #D2B48C;
}

Демо

к меню ↑

Макет из трёх колонок слева и справа

Этот макет из трёх колонок поддерживается всеми браузерами. Посмотрите внимательно на HTML сначала идут боковые колонки, а затем колонка для содержания. Для разметки колонок применяются свойство CSS float:. Проблема этого макета отобразить видимую часть содержания для мобильных устройств.

HTML

<div class="sidebar">
   <h3>Колонка 1</h3>
</div>
<div class="aside">
   <h3>Колонка 3</h3>
</div>
<div class="article">
    <h1>Колонка 2</h1>
</div>

CSS

.article {
	background: #afccdb;
	padding-top: 1px;
}
.sidebar, .aside {
	width: 250px;
	background: #fc0;
	float: left;
}
.aside {
	float: right;
}

Демо

Далее похожий макет, разница только в то что все колонки обтекают слева.

HTML

<div class="sidebar">
     <h3>Колонка 1</h3>
  </div>
  <div class="article">
     <h1>Колонка 2</h1>
  </div>
  <div class="aside">
     <h3>Колонка 3</h3>
  </div>

CSS

.sidebar, .aside, .article {
	float: left;
}

Демо

к меню ↑

Три колонки с относительной позицией

Макет с тремя колонками с относительной позицией уникальный. Я не видел, что бы этот способ разметки CSS применяли для веб-сайтов, состоящих из трёх колонок, но как макет для всех существующих браузеров вполне подходит.

HTML

<div class="main">
  <div class="content col">
    <h1>Колонка 2</h1>
  </div>
  <div class="sidebar col">
    <h3>Колонка 1</h3>
  </div>
  <div class="aside col">
    <h3>Колонка 3</h3>
  </div>
</div>

CSS

.main {
	padding-left: 220px;
	padding-right: 260px;
}
.col {
	position: relative;
	float: left;
}
.content {
	background: #afccdb;
	width: 100%;
}
.sidebar, .aside {
	width: 260px;
	right: 260px;
	margin-left: -100%;
	background: #fc0;
}
.aside {
	margin-right: -260px;
	margin-left: 0;
	right: 0;
}

Демо

к меню ↑

Макет из трёх колонок с отступом

Следующий макет из трёх колонок также поддерживается всеми браузерами. Для разметки макета используются свойства CSS, где указан отступ в содержании для правой колонки в процентах. Макет легко адаптировать под разные размеры экрана мобильных устройств без JavaScript. В настоящее время это самый оптимальный макет для веб-сайта из трёх колонок.

HTML

<div class="main">
 <div class="artile">
   <h1>Колонка 2</h1>
</div>
</div>
<div class="sidebar">
   <h3>Колонка 3</h3>
</div>
<div class="aside">
   <h3>Колонка 1</h3>
</div>

CSS

.main {
	float: left;
	width: 100%;
	background: #afccdb;
}
.artile {
	margin-left: 250px;
	margin-right: 21.22%;
}
.sidebar {
	margin-left: -29.0476%;
	width: 21.24%;
	float: right;
	background: #fc0;
}
.aside {
	width: 250px;
	float: left;
	margin: 0 0 0 -100%;
	min-height: 100vh;
	background: #fc0;
}

Демо

Это последний макет с тремя колонками для всех существующих браузеров. Следующие демонстрации макетов из трёх колонок будут с разметкой HTML5 и свойствами CSS3.

к меню ↑

Макет в три колонки HTML5 и CSS3 flex

Из новых технологий макет flex наиболее подходящий для веб-сайта состоящий из трёх колонок. Макет flex работает во всех современных браузерах и имеет большой потенциал. Макет flex с семантической разметкой HTML5 и его легко адаптировать для разных размеров экрана, используя CSS3 Media Queries.

HTML

<main>
   <article>
      <h1>Колонка 2</h1>
   </article>
   <nav>
      <h3>Колонка 1</h3>
   </nav>
   <aside>
      <h3>Колонка 3</h3>
   </aside>
</main>

CSS

main {
	display: flex;
	background: #afccdb;
}
main > article {
	order: 2;
	min-width: 12em;
	flex: 1;
}
main > nav {
	order: 1;
	width: 18%;
	background: #fc0;
}
main > aside {
	order: 3;
	width: 18%;
	background: #fc0;
}
@media all and (max-width:768px) {
main {
	flex-flow: column;
}
main > article, main > nav, main > aside {
	order: 0;
	width: auto;
}
}

Демо

к меню ↑

Макет три колонки HTML5 и CSS3 flex grid

HTML

<main>
  <article>
     <h1>Колонка 2</h1>
  </article>
  <nav>
     <h3>Колонка 1</h3>
  </nav>
  <aside>
     <h3>Колонка 3</h3>
  </aside>
</main>

CSS

main {
	height: 100%;
	display: -webkit-flex;
	display:         flex;
	-webkit-flex-flow: row;
	flex-flow: row;
}
main > article {
	background: #afccdb;
	-webkit-flex: 3 1 70%;
	flex: 3 1 70%;
	-webkit-order: 2;
	order: 2;
}
main > nav {
	background: #fc0;
	-webkit-flex: 1 6 20%;
	flex: 1 6 20%;
	-webkit-order: 1;
	order: 1;
}
main > aside {
	background: #fc0;
	-webkit-flex: 1 6 20%;
	flex: 1 6 20%;
	-webkit-order: 3;
	order: 3;
}
@media all and (max-width: 640px) {
main {
	-webkit-flex-flow: column;
	flex-flow: column;
	flex-direction: column;
}
main > article, main > nav, main > aside {
	-webkit-order: 0;
	order: 0;
}
}

Демо

к меню ↑

Макет на три колонки CSS calc ()

Умная функция CSS calc () имеет свойства разбивать ширину на части в нашем случае их три. Функцию calc () понимают все современные браузеры и даже IE9. Макет с лёгкостью адаптируется для разных размеров экрана мобильных устройств.

HTML

<div class="sidebar">
   <h3>Колонка 1</h3>
</div>
<div class="artile">
   <h1>Колонка 2</h1>
</div>
<div class="aside">
   <h3>Колонка 3</h3>
</div>

CSS

.sidebar, .aside {
	width: calc(50% / 3);
	background: #fc0;
	float: left;
}
.artile {
	width: calc(200% / 3);
	background: #afccdb;
	float: left;
}
@media all and (max-width:768px) {
.sidebar, .aside, .artile {
	width: calc(300% / 3);
	clear: both;
	height: initial;
}
}

Демо

к меню ↑

Макет в три колонки display table

Для разметки тегов HTML5 макет использует свойства CSS display:table- и без проблем адаптируется для всех размеров экрана мобильных устройств.

HTML

<header>
   <h1>Заголовок</h1>
   <h2>Верхний колонтитул</h2>
</header>

<main>
	<nav>
       <h3>Колонка 1</h3>
    </nav>
	<article>
       <h1>Колонка 2</h1>
    </article>
	<aside>
       <h3>Колонка 3</h3>
    </aside>
</main>

<footer>
   <h4>Нижний колонтитул</h4>
</footer>

CSS

header, footer {
	background: #f0e68c;
	height: 100px;
}
main {
	margin:0 auto;
	display: table;
	width:100%;
}
nav, article, aside {
	box-sizing: border-box;
	display:table-cell;
}
nav, aside {
	background: #fc0;
	width:18%;
}
article {
	background: #afccdb;
	height: 500px;
}
@media only screen and (max-width:768px) {
   article { display:table-caption; }
   header { display:table-header-group; }
   footer { display:table-footer-group; }
}

Демо

к меню ↑

Заключение

Теперь вы знаете какие бывают макеты, состоящие из трёх колонок. Какой макет использовать решать вам. Если вы знаете еще способы создать макет для веб-сайта с тремя колонками дайте мне знать в комментариях ниже.