Responsive Column Docs

Responsive Page Layouts

Holy Grail Layout

Left Sidebar Layout

Right Sidebar Layout

Full Page Layout

Responsive Column Sets

1 Column

2 Columns

3 Columns

4 Columns

5 Columns

6 Columns

7 Columns

8 Columns

1 Column Layouts (5 Demos With Example HTML & CSS)

These layouts all use the Responsive Columns layout system.

Download All Demos
(responsive-columns.zip 155k)

The Ultimate Guide to Material-UI T...
The Ultimate Guide to Material-UI Table Pagination MUI v5

One column layouts are pretty simple, but they come in many different forms.

In this article, we'll explore the various types of one-column layouts and show how to easily create them with the Responsive Columns layout system. You can download all of these demos with the handy link above.

Let's get started.

Basic 1 Column Layout

This one-column layout is about as simple as they come, it includes padding and a background color.

Column content

The HTML

<r-c join>
    <c1-1>
        Column content
    </c1-1>
</r-c>

Fixed-Width 1 Column Layout

This one-column layout has a maximum width so lines of text don't get too long to read. The column is centered on the page when it's not 100% wide.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis lectus vel metus pellentesque, eu venenatis est euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus eget lacinia ipsum. Aenean gravida interdum enim, nec rhoncus orci mollis et. Maecenas posuere sed libero id porta. Aenean finibus nulla metus, vitae dictum odio pretium id.

The HTML

<r-c class="fixed-width">
    <c1-1>
        <!-- Content here -->
    </c1-1>
</r-c>

The CSS

.fixed-width > * {
    max-width:30em;
    margin:0 auto;
}

Set your max-width in ems if you want the width to be relative to your text size. You can also use pixels or percentage widths if you prefer.

Full-Screen Centered 1 Column Layout

In this one-column layout, the column is forced to the full height of the screen and the content is centered horizontally and vertically.

Vertically and horizontally centered content

The HTML

<r-c join class="full-height-centered">
    <c1-1 r-c middle>
        <c1-1>
            <!-- Content here -->
        </c1-1>
    </c1-1>
</r-c>

The CSS

.full-height-centered {
    min-height:100vh;
    text-align:center;
    background:#f97171;
}

Full-Screen Photo, 1 Column Layout

This one-column layout is the height of your browser window and filled with a full screen photo for maximum effect.


The HTML

<r-c join class="full-height">
    <c1-1 class="cover-photo">
        <br>
    </c1-1>
</r-c>

The CSS

.full-height {
    min-height:100vh; /* vh = viewport height */
}

.cover-photo {
    background-image:url(https://placeimg.com/640/480/arch);
    background-size:cover;
    background-position:50% 50%;
}

Note: I'm using PlaceIMG for a random architecture photo as the column background. You can use whatever image you like.

1 Column Layout With Semantic HTML5 Tags

This one-column layout uses semantic HTML5 tags.

Column content

The HTML

<article data-r-c data-join>
    <section data-c1-1 class="red">
        <!-- column content -->
    </section>
</article>

The Responsive Columns system is compatible with semantic tags. Full details here: How to use semantic HTML tags with responsive columns.

The CSS

.red {
    background:#f97171;
}

Full Page Layouts With 1 Column

See my 1 column layout with responsive header and footer.

Full Browser Support

Responsive Columns works in all modern browsers, plus all old browsers that support Flexbox:

  • Google Chrome 29+
  • Mozilla Firefox 28+
  • Microsoft Edge 12+
  • Apple Safari 9+
  • Opera 17+
  • Android Browser 4.4+
  • Opera Mobile 12.1+
  • Chrome for Android
  • Firefox for Android
  • Opera Mini

The Responsive Columns Layout System Is Simple And Powerful

You can easily change the widths of your columns and change how they respond to different screen sizes.

Refer to the Responsive Columns Documentation to see how easy it is to create responsive layouts to your exact requirements.

Web Design Articles

Racing car made from custom tags

Custom HTML Tags (18 Things To Know Before Using Them)

Web design
Looking into an empty div

Empty HTML Tags (21 Weird Things You Need To Know!)

Web design
Columns all the same height

Equal-Height Columns (CSS Grid, Flexbox, Floated Containers, & Table Methods)

Web design
How to add CSS to HTML

How to add CSS to HTML (With Link, Embed, Import, and Inline styles)

Web design
A delicious soup made from custom elements

Replace Divs With Custom Elements For Superior Markup

Web design
Padding bewteen desktop, tablet, and mobile

Responsive Padding, Margin & Gutters With CSS Calc

Web design
Superman blocking styles

Style Blocker: How To Prevent CSS Cascade With Shadow DOM

Web design
Responsive text size

Responsive Font Size (Optimal Text at Every Breakpoint)

Web design
Responsive Columns Layout System

Responsive Columns: Build Amazing Layouts With Custom HTML Tags

Web design
Responsive house plan

Responsive House Plan (Web Design Meets Architecture!)

Architecture
Boggle dice shaker

Boggle Dice Shaker (Built With Javascript)

Web design
Footer at the bottom of the page

Get Down! How to Keep Footers at the Bottom of the Page

Web design
Is CSS margin top or bottom better?

CSS: Margin Top vs Bottom (A Trick You Should Know)

Web design
Beautiful centered menus with CSS

CSS: Horizontally Centred Menus (With Optional Dropdowns)

Web design
Ads that can change size to fit any screen size

Responsive Banner Ads with HTML5 and CSS3

Web design