Contents  >

CSS Flexbox: Four Column Layouts

Learning Goals

At the end of this Tutorial you will be able to:

You can view a finished version of the sample four-column web page you style in this Tutorial by clicking the link below. The finished sample page will open in a new tab of your web browser.

Sample image flex-four-columns.html

Contents

Working with the four-column web page

Setting up the flexbox child columns

Setting up the flexbox parent elements

Adding coloured backgrounds

Adding coloured backgrounds to a parent container

Changing the text colours inside a parent element

Adding a coloured background to a child column

Changing the text colours inside a child column

Adding padding to a child column

Updating the content of your home page

Uploading your files to GitHub

Working with the four-column web page

In this Tutorial, you will work with the sample four-column web page, the sample four-column stylesheet and four of the image files you downloaded in the previous CSS Flexbox: Two Column Layouts Tutorial.

  1. In Visual Studio Code, open the following two files:   flex-four-columns.html
    flex-four-columns.css
  2. Display the flex-four-columns.html web page in your browser. You can see that:
    • Coloured borders have been added to highlight the edges of the parent elements (in red) and the child elements (in blue).
    • All the content is positioned directly against the edges of the browser window.   That is because no padding (inside spacing) has been added to the container-block parent container elements.
    • All the content is 100% wide, left-to-right, across the browser window.   That is because the item-col-4 child columns are defaulting to 100% width.
  3. In VS Code, display the flex-four-columns.css stylesheet.   You can see two empty styles for the .container-block selector. Each is inside a media query. The first query is for desktop/laptop screens; the second, for mobiles. Sample image
  4. Add the following padding properties and values to the two .container-block selectors.
    /* ========== MAIN CONTENT CONTAINERS ========= */
    /* Desktops */
    @media (min-width:768px) { .container-block { padding: 4% 8% } }
    
    /* Mobiles */
    @media (max-width:767px) { .container-block { padding: 11% 8% } }
    
  5. Save the flex-four-columns.css stylesheet and view the web page in your browser.

On desktop/laptop and on mobile-sized screens, you should now see spacing inside the red-coloured borders of the two container-block parent elements.

Sample image

Setting up the flexbox child columns

Your next task is to set the width of the .item-col-4 child columns to create your four-column layout on desktop and laptop screens.

  1. In VS Code, display the flex-four-columns.css stylesheet.   You can see that, for mobile screens, a width: 100% has been set for the .item-col-4 child column selector.   However, no width value has been set for .item-col-4 on desktop/laptop screens. Sample image
  2. To create a four-column layout on large screens, copy-and-paste the following.
    /* Desktops: flexbox child columns */
    @media (min-width:768px) {
        .item-col-4 { width: 22% }
    }
  3. Save the flex-four-columns.css stylesheet and view the web page in your browser.
Sample image

As you can see:

Setting up the flexbox parent element

For the web browser to display the item-col-4 child columns at your set width of 22%, you need to make their parent container, named container-flexbox, a flexbox element.

  1. In VS Code, you can see that a .container-block selector has been created. But it contains no style rules. Sample image
  2. Copy-and-paste the following three flexbox-related property and value pairs.
    /* Flexbox parent container */
    .container-flexbox {
       display: flex; 
       justify-content: space-between; 
       flex-wrap: wrap; 
    }
  3. Save the flex-four-columns.css stylesheet and view the web page in your browser.

Your child elements should now display correctly in a four-column layout on desktop/laptop screens.

Sample image

Use your web browser’s screen resizing feature to confirm your layout displays as a single column on mobile-sized screens.

Adding coloured backgrounds

Next, you will add coloured backgrounds to your four-column layout: first, to a parent container and all its child columns; and then to an individual child column.

Adding coloured backgrounds to a parent container

Follow these steps to add coloured backgrounds to two of the three parent container elements in your web page.

  1. In VS Code, display the flex-four-columns.html web page.
  2. To the first of the two parent elements, add the bg-dark class. Sample image
  3. Save the web page and view the result in your browser.

On desktop/laptop and on mobile-sized screens, your web page should now look as shown below.

Sample image

Changing the text colours inside a parent element

For the <h3> sub-headings and <p> paragraphs inside the parent container with the bg-dark background, you need to change the colour of the text.

Here are the steps:

  1. In your flex-four-columns.css stylesheet, near the bottom, you should see the following comment line.
    /* Colours for sub-headings and paragraphs */
    
    Add the following code under it:
    .container-flexbox.bg-dark .item-col-4 * { color: #fff }
    
    This ‘wildcard᾿ CSS selector of * will target all text inside item-col-4 child columns – regardless of the particular HTML tag.
  2. Save the web page and view the result in your browser.

On desktop/laptop and on mobile-sized screens, your web page should now look as shown below.

Sample image

Adding a coloured background to a child column

Next, you will add a background colour to a particular item-col-4 child column inside one of the two parent containers in your web page. Follow these steps.

  1. In the flex-four-columns.html web page, add the bg-dark class to the third item-col-4 child column inside the second parent container. Sample image
  2. Save the web page and view the result in your browser.
Sample image

As you can see, you need to perform two more tasks:

Changing the text colours inside a child column

For the <h3> sub-headings and <p> paragraphs inside the child column with the bg-dark background, you need to change the colour of the text.

Here are the steps:

  1. In your flex-four-columns.css stylesheet, near the bottom, you have the following comment line and a CSS style rule that applies to all child columns whose parent containers have a class of bg-dark.
    /* Colours for sub-headings and paragraphs */
    .container-flexbox.bg-dark .item-col-4 * { color: #fff }
    
  2. Update this by adding a new style rule that applies only when a child element has a class bg-dark.
    /* Colours for sub-headings and paragraphs */
    .container-flexbox.bg-dark .item-col-4 * { color: #fff }
    .container-flexbox .item-col-4.bg-dark * { color: #fff }
    
    This new style rule with the ‘wildcard’ CSS selector of * will target all text inside item-col-4 child columns that have the bg-dark class – regardless of their particular HTML tag.
  3. Save the web page and view the result in your browser.

On desktop/laptop and on mobile-sized screens, your web page should now look as shown below.

Sample image

You can see that you need to add some padding to the child column with the coloured background.

Adding padding to a child column

In these next steps, you will apply padding to a particular child column of your layout.

  1. In your flex-four-columns.html web page, add the new class of item-col-padding to the child column that has a class of bg-dark. Sample image
  2. Save the web page and view the result in your browser. On desktop/laptop and on mobile-sized screens, your web page should now look as shown below. Sample image The padding within the item-col-4 child columns is created by the following two styles in the flex-four-columns.css file. Sample image Update the two styles for the .item-col-padding selector in your stylesheet as follows.
    /* Desktops: inner padding for child columns */
    @media (min-width:768px) {
       [class*="item-col-"].item-col-padding { padding: 1.8% 2% 2.2% 2% }
    }
    
    /* Mobiles: inner padding for child columns  */
    @media (max-width:767px) {
        [class*="item-col-"].item-col-padding { padding: 6.5% 7% 7% 7% }
    }
    These updated style rules will also apply to child columns with class names such as item-col-2 and item-col-3.
  3. Save your stylesheet file.

You are now finished working with this sample web page and stylesheet.

So you can now remove from your stylesheet the two styles of red borders around parent containers and blue borders around child elements.

Click flex-four-columns.html to view a finished sample of this web page in a new tab of your web browser.

Updating the content of your home page

Now that you have created and styled a new sample web page, you need to add a new hyperlink to the home page of your web site.

  1. In VS Code, open this HTML file in your websites folder:   index.html
  2. Copy-and-paste the following the following new line to the bottom of your list of hyperlinks.
    <p><a href="flex-four-columns.html">Four Column Flexbox Layout</a></p>
    

Save your index.html web page and view the result in your browser.

Uploading your files to GitHub

After finishing your web pages and stylesheets, you are now ready to upload them to your account on GitHub.

  1. Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now.
  2. Select or drag-and-drop the following files to upload them to your GitHub account:   index.html
    flex-four-columns.html
    flex-four-columns.css
    sport-1.jpg
    sport-2.jpg
    sport-3.jpg
    sport-4.jpg
  3. Finally, scroll down to the bottom of the GitHub screen, enter a short message in the Commit changes box and click the Commit changes button.

Your web pages and stylesheets are now published on GitHub at web addresses similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/flex-four-columns.html

It may take a few minutes for your uploaded files to appear on GitHub.



Return to Contents.