The principle of 8pt Grid is that use multiples of 8 (8, 16, 24, 32, 40, 48, 56, etc.) to layout, dimensions, padding, and margin of elements.

A simple guide to building keyboard-activated layout grid overlays with JavaScript and CSS for web development projects.

Myriam Frisano explores the basics of hand-coding SVGs with practical examples to demystify the inner workings of common SVG elements. In this guide, you’ll learn about asking the right questions to solve common positioning problems and how to leverage JavaScript so that, by the end, you can add “SVG coding” to your toolbox. You’ll also be able to declare proudly, “I know how to draw literal pictures with words!”

A fresh look at the CSS grid template areas and how to take advantage of its full potential today.

CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest 💡 lightbulb moments I've had in my own learning journey.

built with 🌮 by sarah_edo

You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.

Though this project can get a basic layout started for you, this project is not a comprehensive tour of CSS Grid capabilities. It is a way for you to use CSS Grid features quickly.

Imagine you need to create a two-column layout. Yes, the simplest one: a column on the left, a column on the right, and some gap in-between. There’s an obvious modern solution for that:

.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

Meet the Extendabox-rule

The four strokes making up a box end at each intersection. But in our unconsciousness, every one of those lines draws out an imaginary line much further, through the entirety of your design.

A grid works the other way around: you define a set of columns, gutters, and rows to make up certain sections of your design, and you then position all of your objects onto that grid.

I find working with the grid helpful. The grid helps to maintain consistency across the different layouts and make faster design decisions. Grids give more precise control over alignments and layout on different screen sizes.

Fixed-Width Layout Grid Setup

To set up a fixed-width grid, we use fixed numeric value for gutters and columns. I recommend 74px wide columns, 32px wide gutters and 16px side margins on each side.

Mobile View

For mobile devices, we use a fluid grid where gutters and side margins have fixed numeric values. I recommend 16px wide gutters and 16px wide side margins on each side.
We can design mobile interfaces at 360×640 sized artboard.
Mobile devices have a small screen resolution. If we display the 12 separate columns, gutters, and side margins on such a small resolution, it becomes quite cumbersome to design at scale.

Programming Design Systems is a free digital book that teaches a practical introduction to the new foundations of graphic design.

Grids

Back in the day, there was a gold-standard website layout that everyone strived to create, but that was notoriously difficult to get right…

I recently discovered an elegant solution to this problem using CSS Grid. In this post, we'll learn how it works!

Dynamic centered layout

We all know margin: 0 auto to center a layout. Ideal for article pages, right? But what if you want elements like images to exceed the maximum width of the article?

*10 Modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be. [Watch the Video]

You are probably already familiar with CSS box model for regular elements. Let’s begin with a similar “bird’s eye view” representation for the CSS Grid:

Are you ready to learn how box alignment works for CSS Grid and Flexbox? This article is for you.

In the first article in this series, I took a look at how to create a grid container and the various properties applied to the parent element that make up your grid. Once you have a grid, you have a set of grid lines. In this article, you will learn how to place items against those lines by adding properties to the direct children of the grid container.

For years, we've struggled to build resilient layouts on the web, but CSS Grid promises to change all that — and you can start using it now, with only a few properties and basic concepts. Learn how to build some previously-complex layouts in under 10 minutes, with only a few lines of code. Miriam Suzanne walks you through a practical demo.

We have a whole selection of ways to align things in CSS today, and it isn’t always an obvious decision which to use. However, knowing what is available means that you can always try a few tactics if you come across a particular alignment problem.

Use names. Use frs. Don't use a grid system. Wait, what? 2.17.2019