Gridding System

In this activity, we’ll use CSS to create a gridding system similar to the approach used by Bootstrap.

Begin by copying the following HTML into a file. We’ll use this text as a starting point.

<!doctype html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
    <div>
        <!-- header information -->
        <h1>Our Responsive Example</h1>
        <h2>This is a quick example with typos!</h2>
    </div>
    <div>
        <!-- body of page -->
        <h3>Our Page Title</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam rem
        quasi saepe possimus harum nostrum, et voluptatibus maiores ratione
        blanditiis explicabo nesciunt temporibus veritatis incidunt aspernatur
        labore nisi nam alias!</p> 
        <p>Repudiandae, id. Consequatur reprehenderit cumque quam voluptas
        soluta explicabo autem saepe maiores corrupti iure optio assumenda cum
        quia, earum fugiat. Quae vero facilis eum et quis ullam rem
        necessitatibus? Dignissimos!</p> 
        <p>Quia laborum modi eum perspiciatis iste suscipit expedita dicta unde
        ex, quasi consectetur distinctio, temporibus dignissimos. Vitae
        incidunt maiores eaque itaque expedita blanditiis quidem minima.
        Exercitationem quidem totam vero suscipit?</p> 
        <p>Magnam sunt provident consequuntur iure libero eum quam quas
        voluptatum ad ratione distinctio delectus facilis saepe asperiores
        natus nemo blanditiis facere, aut sit eveniet exercitationem.
        Perspiciatis natus autem debitis nostrum!</p>
    </div>
    <div>
        <!-- secondary content -->
        <h4>Learn More</h4>
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
        </ul>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div>
        <!-- footer content -->
        <p>&copy; 2025 CS4640 Class</p>
    </div>
</body>
</html>

First update our generic div elements to semantic HTML elements, such as <footer>, <header>, <article>, <main>, <section>, <aside>, etc. Choose the elements that best fit the content and organization of our page.

It will be easier going forward to enable the alternative box model for our design. Therefore, you should include the following CSS.
html {
   box-sizing: border-box;
}

*, *::before, *::after {
   box-sizing: inherit;
}

Next, let’s implement the gridding system in HTML. Imagine that the page is one large table, consisting of rows and columns, where each row is always divided into 12 equally-sized columns. Therefore, each column represents 8.33% of the overall width. We’ll use this grid to lay out our page for larger screens.

Add a CSS rule that selects on the row class and sets the width to be 100%. This will be the basis for each of our collection of columns.
We will typically determine how many columns a particular container (or element) spans in the overall display. Therefore, we will define CSS rules based on various column spans, depending on which we intend to use in the page. As an example, if we want to declare a two-column span, we may include the following CSS rule:
```
 .col-2 {
     width: 16.66%
 }
```
Determine the layout of your page (i.e., should the header span 6 columns? 12 columns? should the secondary content be a sidebar? how wide?). Then, when you have decided on the column spans you will use, include them in your CSS. Here are some quick calculations:

Column Span Width

col-1 8.33%

col-2 16.66%

col-3 25%

col-4 33.33%

col-5 41.66%

col-6 50%

col-7 58.33%

col-8 66.66%

col-9 75%

col-10 83.33%

col-11 91.66%

col-12 100%
Apply the col-X and row classes to the elements in your HTML file. Note that you may need to add additional elements to group content together in one row. Remember: each row should have 12 columns.
View your page. Question: Is your page organized the way you would expect?
Looks like our columns aren’t wrapping! Remember that the elements we are using are block elements: that is, they always appear on a new line. In order force them to wrap, we’ll apply the float: left style to all the columns. Rather than pasting the rule in every declaration block, we can select all elements with a column class:
```
 [class*="col-"] {
     float: left;
 }
```

Column Span	Width
col-1	8.33%
col-2	16.66%
col-3	25%
col-4	33.33%
col-5	41.66%
col-6	50%
col-7	58.33%
col-8	66.66%
col-9	75%
col-10	83.33%
col-11	91.66%
col-12	100%

You may consider adding a border to your columns for this exercise to see how the browser organizes the columns in the window.

Question: What do you notice about the heights of the columns in each row?

How does the page layout differ if you choose to float: right instead?

Responsive Design

Next, let’s test your site’s responsive design. Use the browser’s responsive design mode (or resize the browser window) to view the page in a smaller size. In responsive design mode, you can choose different mobile-friendly sizes.

Question: How does your site adjust?

Let us now consider designing for mobile. When our site is viewed on mobile, we want all rows to break apart such that each column is displayed independently on its own row. In order to do this, we can use the browser’s built in wrapping and set the width of all columns to 100%.

We’ll walk through this part together as a class.