CSS Layout

wombaco·February 22, 2025·0 comments

Introduction

When building a webpage, understanding layouts is key to creating a visually appealing and functional design. In this lesson, we will cover how to work with layouts, and how to ensure designs adapt to different screen sizes.

Layout Types

There are different approaches to structuring a webpage. Some common methods include fixed-width, grid, and liquid layouts.

Fixed-Width Layout

A fixed-width layout has elements with fixed widths. In this type of layout, the user controls the size of each element by fixing it using pixels. For example, a container may be set with a width of 1100px. A row within the container includes two elements, an image that is set to 400px wide, and a div that will contain text, that is set to 700px wide.

.container {
    width: 1100px;
}

img {
    height: auto;
    width: 400px;
}

div.text-wrap {
    width: 700px;
}

Pros:

Fixed layouts give granular control over each element and they are relatively easy to implement.

Cons:

They are not responsive. If you set the width of a container to 1100px, content will go off the screen on smaller devices and require horizontal scrolling or simply get cut off depending on the value of the overflow property. Fixed layouts will need to be adjusted on various screen sizes using media queries.

Grid Layout

The grid layout is a popular system where the page is divided into equal-width columns. The most popular is the 12-column grid. For simplicity, let’s say we have a container with a width of 1200px. Divide 1200 by 12 and you end up with equal columns of 100px each. We could then create and use classes on elements to give them the desired widths. Below is an example of how the CSS might look.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 1200px;
}

.col {
  box-sizing: border-box;
}

.col-12 {
    width: 1200px;
}

.col-11 {
    width: 1100px;
}

.col-10 {
    width: 1000px;
}

.col-9 {
    width: 900px;
}

.col-8 {
    width: 800px;
}

.col-7 {
    width: 700px; 
}

.col-6 {
    width: 600px; 
}

.col-5 {
    width: 500px; 
}

.col-4 {
    width: 400px; 
}

.col-3 {
    width: 300px; 
}

.col-2 {
    width: 200px; 
}

.col-1 {
    width: 100px; 
}

Using this system, we can quickly add html and give it a class to size it appropriately. To create a container with two elements, one that is 400px and one that is 800px, we could use the following HTML.

<div class="container">
  <div class="col col-4"></div>
  <div class="col col-8"></div>
</div>

This is just an example of course. We would need to expand this by adding media queries and other styles to make it work exactly how we want. By doing so, we can create a robust design system that allows us to speed up our development process.

Liquid Layout

A liquid layout uses percentages instead of fixed widths to allow elements to resize dynamically.

.container {
    width: 80%;
}

Pros:

  • Adapts to different screen sizes

Cons:

  • Can lead to overly stretched content on large screens

Responsive Design with Media Queries

To make designs adaptable, we use media queries:

@media only screen and (max-width: 768px) {
    .container {
        width: 600px;
    }
}

This ensures styles are applied only when the screen size is 768px or smaller.

CSS Frameworks

Instead of writing everything from scratch, frameworks like Bootstrap and MaterializeCSS provide prebuilt styles and layouts.

You can use them by adding a CDN link to your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">

Summary

Frameworks: Utilize CSS libraries to speed up development.

Positioning: Use static, relative, absolute, or fixed positioning as needed.

Float: Helps in aligning elements; use clear to prevent layout issues.

Layouts: Choose between fixed, grid, or liquid layouts based on your needs.

Media Queries: Ensure your site is responsive.

wombaco

Related posts