We have been made aware that there are nefarious individuals making job offers at Konverge that do not exist. The goal of this scam is to attain personal information from job seekers. Click below for some telltale signs that a job offer is a scam.


Learn More Dismiss

menu

Web Content in Columns


  • Author: The Konverge Team
  • Published: 7/26/2022 1:08:16 PM
  • 5 minute read

Web Content in Columns

Brief History of columns in Design

Here is a piece of design history, the front page of “The Toronto World” from January 2nd 1913.

Web Content in Columns

Source: wikipedia.org

As we can see, column layouts have been used long before electronics existed. They are also common in books, and especially pamphlets. These columns provide us a natural way to organize information and allow our eyes to focus on a particular section of what can be a rather dense display of content.

We now see columns everywhere on the web and in our applications and these layouts are a core principle in design. Believe it or not, coding these layouts has not always been as easy as it is now thanks to dedicated tools — such as Flexbox and CSS grid — which are designed to help us achieve column style layouts without trouble.

Building column style layouts with the right tools will look great and allow us to use the flexibility of modern browsers displayed on any screen size.

Example of Columns on the Web

Here’s a modern example of news laid out in columns.

Web Content in Columns

Source: nationalpost.com

We can see there are three main columns in this layout, and within these columns there are sub column layouts such as video thumbnails with text next to them.

Common terms used with grid layouts

Web Content in Columns

Columns (Red) - The space where content is placed.
Margins (Green) - The space between the content and the left and right side of the screen.
Gutters (Blue) - The space between columns of text.

Screen Width and Breakpoints

Here is another screenshot from “National Post”. Notice we’re now only seeing a 2 column layout instead of 3. This screenshot was taken from a browser with a smaller width.

Web Content in Columns

When designing a column layout there must be consideration for when a given column layout no longer works. This 2 column layout would not work on a larger screen size, it would be wasteful and full of whitespace. On the contrary a 3 column layout would not work on a smaller screen size since the text and images in each column would be squeezed unnaturally.

A breakpoint is simply the width (in pixels) where the switch from 3 columns to 2 columns occurs. With CSS we can use “Media Queries” to achieve any style we want — such as column widths — at different screen sizes.

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
   .div { width : 100% ; } /* Set divs to full width (1 column layout)
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width : 768px) {
   .div { width: 50%; } /* Set divs to half width (2 column layout)
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
   .div { width : 33.3% ; } /* Set divs to third width (3 column layout) */
}

Styling with Flexbox and CSS Grid

As we mentioned earlier both Flexbox and CSS Grid are great tools for building layouts. They are both necessary to understand and although they can both accomplish the same layout, there are differences between them.

Flexbox — A one dimensional layout tool used mainly for alignment and simple layouts.
CSS Grid — A two dimensional layout tool used for complex layouts.

Building a simple 2 column layout with CSS Grid

For the purposes of this blog post we’ll be primarily looking at CSS Grid. We’ll build a simple 2 column layout with CSS Grid. However it should be noted that something this simple could also be done with Flexbox. There will be a resource at the end that goes deeper on the difference between the two options.

Also, if you look closely at the CSS for this example you’ll notice that Flexbox is used for alignment within each of the contained sections of the site.

Simple Grid Layout

Notice this layout is full width and it will automatically resize based on the browser’s width.

Web Content in Columns

See on Codepen: https://codepen.io/glueckler/pen/QWmvvbJ

HTML

<div id="container ">
    <header>Header</header>
   <aside>Aside</aside>
   <main >Main </main >
    <footer>Footer</footer >
</
div>

CSS

#container
{    /* Use responsive full width.. */
   width : 100%;
    /* display grid is necessary for any CSS Grid layout.. */

   display : grid ;
   /* Set the height of the 3 vertical sections.. */

   grid-template-rows: 80px 200px 100px;
    /* Set the horizontal width of containers.. */

   grid-template-columns : 0.5fr 1fr ;
}

header {
   /* Set the position of the start and end of this container.. */
   /* Start at 1 and end at 2 */
   grid-row: 1 / 2;
   /* Start at 1 and end at 3 */

   grid-column: 1 / 3; /* You could also use this: 1 / span 2; */
   background: Coral;
}

aside {
   grid-row: 2 / 3;
   grid-column: 1 / 2;
   background : Aqua ;
}

main {
   grid-row: 2 / 3;
   grid-column: 2 / 3;
    background: AquaMarine;
}

footer {
   grid-row: 3 / 4; grid-column: 1 / 3;
   background: DarkCyan;
}

/* Use Flexbox to align content within the grid layout */
div > * {
   display: flex;
   align-items: center;
   justify-content: center;
}

Conclusion

Columns have been a powerful layout style for much longer than computers how been around. Grid and column layouts provide us with the ability to section content with flow and with hierarchy and can be used within themselves to position text next to images for example.

The power of browsers allows us to set up a desired layout and have it laid out consistently on anyones screen size. We use the terms “Margin”, “Gutters”, and “Columns” to define how column layouts appear on the screen. Modern tools like Flexbox and CSS Grid are essential to understand and provide all the means necessary to code the layout of your choice.

Resources

Here is a great resource about column layouts from Material Design
https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

A blog illustrating the difference between Flexbox and CSS Grid
https://blog.logrocket.com/flexbox-vs-css-grid/

If you're ready to get started designing a website, but aren't sure where to start, why not give Konverge a call? We have over 28 years of experience building Custom Software and designing and building websites.

FIll out the form below or click here to contact us today!

Subscribe and stay updated with our FREE newsletter.

Recent Posts

Let's Talk

To learn more about Konverge’s ultimate custom software solutions, please contact us for your free consultation.


We take your privacy seriously and will never share your information. For details see our Privacy Policy.

Busy Office Banner