CSS Tutorial

CSS Multiple Columns

Last modified on: October 31, 2024

<h3>CSS Multiple Columns Overview</h3>
<p>CSS multiple columns are great for improving readability on webpages by splitting text or content into multiple columns, similar to a newspaper layout. This can be particularly helpful for displaying lengthy text in a visually engaging way.</p>
<h3>Basic Properties for CSS Columns</h3>
<p>CSS offers several properties for creating multi-column layouts:</p>
<ol>
<li><strong><code>column-count</code></strong>: Defines the number of columns.</li>
<li><strong><code>column-width</code></strong>: Sets the ideal width for each column.</li>
<li><strong><code>column-gap</code></strong>: Controls the spacing between columns.</li>
<li><strong><code>column-rule</code></strong>: Adds a line between columns for visual separation.</li>
</ol>
<h3>Example 1: Basic Multi-Column Layout</h3>
<p>Here&rsquo;s a basic example where we define a 3-column layout:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.multicolumn {
  column-count: 3;
  column-gap: 20px;
}
</code></pre>
</div>
</div>
</div>
</div>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;div class="multicolumn"&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis quam et.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong><code>column-count: 3</code></strong> sets the content to display in three columns.</li>
<li><strong><code>column-gap: 20px</code></strong> defines the space between columns.</li>
</ul>
<h3>Example 2: Using <code>column-width</code></h3>
<p>Instead of setting a column count, you can use <code>column-width</code> to control the column width and allow CSS to decide the optimal number of columns based on screen size.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.multicolumn {
  column-width: 200px;
  column-gap: 15px;
}
</code></pre>
</div>
</div>
</div>
</div>
<p>This approach automatically adjusts the number of columns to fit the container width.</p>
<h3>Example 3: Adding a Column Rule</h3>
<p>The <code>column-rule</code> property adds a visual divider between columns, which can be customized with color, style, and width.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.multicolumn {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong><code>column-rule: 1px solid #ccc</code></strong> creates a light gray line between columns.</li>
</ul>
<h3>Combining Properties for Responsive Design</h3>
<p>Using both <code>column-count</code> and <code>column-width</code> can create a responsive layout that adjusts with screen size.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.multicolumn {
  column-count: 3;
  column-width: 150px;
  column-gap: 20px;
  column-rule: 1px solid #ddd;
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>Full Example: CSS Multi-Column with Media Queries</h3>
<p>You can use media queries to control the number of columns based on the screen size:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.multicolumn {
  column-gap: 20px;
  column-rule: 1px solid #ddd;
}

@media (min-width: 768px) {
  .multicolumn {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .multicolumn {
    column-count: 3;
  }
}
</code></pre>
</div>
</div>
</div>
</div>
<p>This layout:</p>
<ul>
<li>Has one column on small screens.</li>
<li>Transitions to two columns on tablets (768px and above).</li>
<li>Expands to three columns on larger screens (1024px and above).</li>
</ul>
<hr />
<h3>Summary</h3>
<p>CSS multiple columns provide a flexible, visually appealing way to organize content. By adjusting properties like <code>column-count</code>, <code>column-width</code>, and <code>column-gap</code>, you can create a dynamic, responsive layout that adapts to various screen sizes.</p>

Web Technology View More