path: root/files/ru/learn/css/css_layout/multiple-column_layout/index.html

---
title: Макет с несколькими столбцами
slug: Learn/CSS/CSS_layout/Multiple-column_Layout
translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout
original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_столбцами
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</div>

<p class="summary">Спецификация макет с несколькими столбцами даёт вам метод вёрстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Необходимые знания:</th>
   <td>
    <p>Основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), идея о том как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>.)</p>
   </td>
  </tr>
  <tr>
   <th scope="row">Задача:</th>
   <td>
    <p>Изучить как создавать макет с несколькими столбцами на веб-страницах, такой как вы можете найти в газете.</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Базовый_пример">Базовый пример</h2>

<p>Сейчас мы будем изучать как использовать макет с несколькими столбцами, часто называемый <em>multicol. </em>Вы можете следовать за нами <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">скачав файл отправной точки multicol</a> и добавлять CSS в соответствующие места. В конце раздела вы можете посмотреть живой пример того, как конечный код должен выглядеть.</p>

<p>Наша отправная точка содержит немного очень простого HTML; обёртка с классом <code>container</code> внутри которого имеется заголовок и несколько параграфов.</p>

<p>{{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству <code>column-count</code> столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:</p>

<pre class="brush: css notranslate">.container {
  column-count: 3;
}
</pre>

<p>Колонки, которые вы создаёте имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.</p>

<div id="Multicol_1">
<div class="hidden">
<h6 id="column-count_example">column-count example</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}
    </pre>
</div>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;h1&gt;Simple multicol example&lt;/h1&gt;

  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">.container {
  column-count: 3;
}
</pre>
</div>

<p>{{ EmbedLiveSample('Multicol_1', '100%', 400) }}</p>

<p>Измените ваш CSS чтобы использовать следующий <code>column-width</code>:</p>

<pre class="brush: css notranslate">.container {
  column-width: 200px;
}
</pre>

<p>Теперь браузер будет давать столько столбцов размером, который вы определили, сколько он сможет; любое оставшееся пространство далее делится между существующими столбцами. Это значит, что вы не получите точную ширину, которую вы задали, только если ваш контейнер <span class="tlid-translation translation" lang="ru"><span title="">не делится точно на эту ширину.</span></span></p>

<div id="Multicol_2">
<div class="hidden">
<h6 id="column-width_example">column-width example</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}</pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;h1&gt;Simple multicol example&lt;/h1&gt;

  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
&lt;/div&gt;</pre>
</div>

<pre class="brush: css notranslate">.container {
  column-width: 200px;
}
</pre>
</div>

<p>{{ EmbedLiveSample('Multicol_2', '100%', 400) }}</p>

<h2 id="Стилизация_столбцов">Стилизация столбцов</h2>

<p>Столбцы, созданные при помощи multicol не могут быть стилизованы по одному. Нет способа сделать один столбец больше, чем другие, или изменить фон или цвет текста одного столбца. У вас есть две возможности изменить способ отображения столбцов:</p>

<ul>
 <li>Изменение размера отступов между столбцами используя {{cssxref("column-gap")}}.</li>
 <li>Добавление линейки между столбцами при помощи {{cssxref("column-rule")}}.</li>
</ul>

<p>Используя ваш пример выше, измените размер отступа добавлением свойства <code>column-gap</code>:</p>

<pre class="brush: css notranslate">.container {
  column-width: 200px;
  column-gap: 20px;
}</pre>

<p>Вы можете поиграть с разными значениями — свойство принимает любые единицы измерения длины. Теперь добавьте линейку между столбцами при помощи <code>column-rule</code>. Таким же способом как и свойство {{cssxref("border")}} с которым вы сталкивались в предыдущих уроках, <code>column-rule</code> — это короткая запись {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} и {{cssxref("column-rule-width")}} и принимает те же значения что и <code>border</code>.</p>

<pre class="brush: css notranslate">.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79, 185, 227);
}</pre>

<p>Попробуйте добавить линейки других стилей и цветов.</p>

<div id="Multicol_3">
<div class="hidden">
<h6 id="Styling_the_columns">Styling the columns</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}
.container {
 column-count: 3;
 column-gap: 20px;
 column-rule: 4px dotted rgb(79, 185, 227);
}</pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;h1&gt;Simple multicol example&lt;/h1&gt;

  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
&lt;/div&gt;</pre>
</div>
</div>

<p>{{ EmbedLiveSample('Multicol_3', '100%', 400) }}</p>

<p><span class="tlid-translation translation" lang="ru"><span title="">Следует обратить внимание на то, что линейка не занимает никакой ширины.</span></span> Она располагается в промежутках, которые вы создали при помощи <code>column-gap</code>. Чтобы придать больше пространства <span class="tlid-translation translation" lang="ru"><span title="">по обе стороны от линейки, вам нужно увеличить размер </span></span><code>column-gap</code><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></p>

<h2 id="Свойств_column-span">Свойств column-span</h2>

<p>Вы можете заставить элемент растянуться через все столбцы. В этом случае контент разрывается, когда сталкивается со spanning элементом и продолжается ниже, создавая новый набор блоков столбцов. Чтобы растянуть элемент через все столбцы используйте свойство {{cssxref("column-span")}} установленное на значение <code>all</code>.</p>

<div class="blockIndicator note">
<p>Обратите внимание что невозможно растянуть элемент через несколько столбцов. Это свойство может иметь либо значение <code>none</code> (по умолчанию) либо <code>all</code>.</p>
</div>

<div id="Multicol_Span">
<div class="hidden">
<h6 id="Spanning_the_columns">Spanning the columns</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}
.container {
 column-count: 3;
 column-gap: 20px;
 column-rule: 4px dotted rgb(79, 185, 227);
}
h2 {
 column-span: all;
 background-color: rgb(79, 185, 227);
 color: white;
 padding: .5em;
}
</pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
  &lt;h1&gt;Simple multicol example&lt;/h1&gt;

  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.

  &lt;h2&gt;Spanning subhead&lt;/h2&gt;
  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
&lt;/div&gt;</pre>
</div>
</div>

<p>{{ EmbedLiveSample('Multicol_Span', '100%', 400) }}</p>

<h2 id="Столбцы_и_фрагментация">Столбцы и фрагментация</h2>

<p>Содержимое макета нескольких столбцов является фрагментированным. <span class="tlid-translation translation" lang="ru"><span title="">По сути, он ведёт себя так же, как контент в постраничных медиа </span></span>— так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.</p>

<p>Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. <span class="tlid-translation translation" lang="ru"><span title="">Заголовок отделяется от текста, если столбцы разделяются между ними.</span></span></p>

<div id="Multicol_4">
<div class="hidden">
<h6 id="Cards_example">Cards example</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}            </pre>
</div>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
    &lt;div class="card"&gt;
      &lt;h2&gt;I am the heading&lt;/h2&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="card"&gt;
      &lt;h2&gt;I am the heading&lt;/h2&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="card"&gt;
      &lt;h2&gt;I am the heading&lt;/h2&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="card"&gt;
      &lt;h2&gt;I am the heading&lt;/h2&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="card"&gt;
      &lt;h2&gt;I am the heading&lt;/h2&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="card"&gt;
      &lt;h2&gt;I am the heading&lt;/h2&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="card"&gt;
      &lt;h2&gt;I am the heading&lt;/h2&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.&lt;/p&gt;
    &lt;/div&gt;

&lt;/div&gt;
</pre>

<pre class="brush: css notranslate">.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}</pre>
</div>

<p>{{ EmbedLiveSample('Multicol_4', '100%', 600) }}</p>

<p>Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Фрагментации</a>. Эта спецификация даёт нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство {{cssxref("break-inside")}} со значением <code>avoid</code> к правилам <code>.card</code>. Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.</p>

<p>В настоящее время также стоит добавлять старое свойство <code>page-break-inside: avoid</code> для лучшей поддержки старых браузеров.</p>

<pre class="brush: css notranslate">.card {
  break-inside: avoid;
  page-break-inside: avoid;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
  padding: 10px;
  margin: 0 0 1em 0;
}
</pre>

<p>Перезагрузите страницу и ваши блоки должны остаться в целости.</p>

<div id="Multicol_5">
<div class="hidden">
<h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}              </pre>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
    &lt;div class="card"&gt;
      &lt;h2&gt;I am the heading&lt;/h2&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="card"&gt;
      &lt;h2&gt;I am the heading&lt;/h2&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="card"&gt;
      &lt;h2&gt;I am the heading&lt;/h2&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="card"&gt;
      &lt;h2&gt;I am the heading&lt;/h2&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="card"&gt;
      &lt;h2&gt;I am the heading&lt;/h2&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="card"&gt;
      &lt;h2&gt;I am the heading&lt;/h2&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="card"&gt;
      &lt;h2&gt;I am the heading&lt;/h2&gt;
      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
                vel, viverra egestas ligula.&lt;/p&gt;
    &lt;/div&gt;

&lt;/div&gt;
</pre>
</div>

<pre class="brush: css notranslate">.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  break-inside: avoid;
  page-break-inside: avoid;
  background-color: rgb(207, 232, 220);
  border: 2px solid rgb(79, 185, 227);
  padding: 10px;
  margin: 0 0 1em 0;
}</pre>
</div>

<p>{{ EmbedLiveSample('Multicol_5', '100%', 600) }}</p>

<h2 id="Проверь_свои_навыки!">Проверь свои навыки!</h2>

<p>Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшие тесты для проверки того, что вы усвоили эту информацию прежде чем, отправитесь дальше — см. <a href="/en-US/docs/Learn/CSS/CSS_layout/Multicol_skills">Поверьте свои навыки: Макет с несколькими столбцами</a>.</p>

<h2 id="Заключение">Заключение</h2>

<p>Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, ещё один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Фрагментация</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Применение макета с несколькими столбцами</a></li>
</ul>

<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</p>

<h2 id="В_этом_модуле">В этом модуле</h2>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS макет</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Отзывчивый дизайн</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Руководство новичка в media queries</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы макетов</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Базовая оценка понимания макета</a></li>
</ul>