Creating markdown columns allows you to organize content in multi-column layouts. While standard markdown doesn't natively support columns, there are several techniques you can use to achieve column layouts in markdown documents.
Markdown columns refer to arranging content in multiple vertical columns side by side. This is useful for:
The most reliable way to create markdown columns is by using HTML within your markdown document:
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
<div>
**Column 1**
Content for the first column goes here.
</div>
<div>
**Column 2**
Content for the second column goes here.
</div>
</div>Content for the first column goes here.
Content for the second column goes here.
You can use markdown tables to create a column-like layout:
| Column 1 | Column 2 |
|----------|----------|
| Content | Content |
| More | More |This creates a two-column layout using table syntax. See our Markdown Tabular Tables guide for more details.
For more control over markdown columns, you can use CSS Grid:
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>Flexbox is another option for creating markdown columns:
<div style="display: flex; gap: 20px;">
<div style="flex: 1;">
**Left Column**
Content here
</div>
<div style="flex: 1;">
**Right Column**
Content here
</div>
</div>GitHub supports HTML in markdown, so you can use any of the HTML methods above. However, GitHub's markdown renderer doesn't support custom CSS, so inline styles work best.
Some markdown processors support column extensions:
To make markdown columns responsive, add media queries:
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;">
<div>Column 1</div>
<div>Column 2</div>
</div>
<style>
@media (max-width: 768px) {
div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
}
</style><div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
<div>Left</div>
<div>Right</div>
</div><div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div><div style="display: grid; grid-template-columns: 2fr 1fr; gap: 20px;">
<div>Main Content</div>
<div>Sidebar</div>
</div>When working with markdown columns, keep in mind:
You can create nested column structures for complex layouts:
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 20px;">
<div>
**Sidebar**
Content here
</div>
<div>
**Main Content**
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div>Nested Column 1</div>
<div>Nested Column 2</div>
</div>
</div>
</div>Create responsive column layouts that adapt to screen size:
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>Create magazine-style multi-column layouts:
<div style="column-count: 3; column-gap: 20px; column-rule: 1px solid #e0e0e0;">
Your content here will flow across multiple columns automatically.
This creates a newspaper or magazine-style layout.
</div>Create card-based layouts with equal-height columns:
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
<div style="border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px;">
**Card 1**
Content
</div>
<div style="border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px;">
**Card 2**
Content
</div>
<div style="border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px;">
**Card 3**
Content
</div>
</div>If your markdown columns aren't showing correctly:
If columns don't stack on mobile:
For optimal performance with markdown columns:
When using markdown columns, ensure accessibility:
Create newsletter-style layouts with multiple columns:
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 30px;">
<div>
**Main Article**
Full article content here...
</div>
<div>
**Sidebar**
- News item 1
- News item 2
- News item 3
</div>
</div>Use columns to compare products side by side:
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
<div>
**Product A**
Features and details
</div>
<div>
**Product B**
Features and details
</div>
<div>
**Product C**
Features and details
</div>
</div>When working with markdown columns:
Practice creating markdown columns using our Markdown Live Editor. You can test different column layouts and see how they render in real-time. For more markdown formatting help, check out our Markdown Cheat Sheet.
Need to convert your markdown with columns to other formats? Use our Markdown to HTML Converter or Markdown to PDF Converter. For creating structured data, see our guide on Markdown Tabular Tables.
Markdown columns provide a powerful way to create sophisticated layouts within markdown documents. While standard markdown doesn't natively support columns, HTML and CSS techniques allow you to achieve professional multi-column layouts that enhance the presentation of your content.
Remember to test your column layouts across different platforms and devices, prioritize accessibility, and always have a fallback plan for platforms that don't support HTML in markdown. With the techniques and examples provided in this guide, you're well-equipped to create beautiful, responsive column layouts in your markdown documents.
Experiment with different column layouts, find what works best for your content, and don't hesitate to combine columns with other markdown features like tables, lists, and formatting to create truly impressive documents!