Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
layout

42 Articles
{
,

}
Direct link to the article Using Grid Named Areas to Visualize (and Reference) Your Layout
grid grid-template-areas layout naming

Using Grid Named Areas to Visualize (and Reference) Your Layout

Whenever we build simple or complex layouts using CSS Grid, we’re usually positioning items with line numbers. Grid layouts contain grid lines that are automatically indexed with positive and negative line numbers (that is unless we explicitly name them). …

Avatar of Preethi Selvam
Preethi Selvam on Aug 26, 2022
Direct link to the article How to Make CSS Slanted Containers
layout transform

How to Make CSS Slanted Containers

I was updating my portfolio and wanted to use the forward slash (/) as a visual element for the site’s main layout. I hadn’t attempted to create a slanted container in CSS before, but it seemed like it …

Avatar of Dave Seidman
Dave Seidman on Feb 9, 2022
Direct link to the article How Do You Handle Component Spacing in a Design System?
components design systems layout

How Do You Handle Component Spacing in a Design System?

Say you’ve got a <Card /> component. It’s highly likely it shouldn’t be butted right up against any other components with no spacing around it. That’s true for… pretty much every component. So, how do you handle component spacing in …

Avatar of Chris Coyier
Chris Coyier on Jan 25, 2022 (Updated on Jan 27, 2022)
Direct link to the article Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries
float grid layout

Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries

A little while back, Chris shared this nice hexagonal grid. And true to its name, it’s using —wait for it — CSS Grid to form that layout. It’s a neat trick! Combining grid columns, grid gaps, and creative clipping …

Avatar of Temani Afif
Temani Afif on Jun 3, 2021 (Updated on Jun 8, 2021)
Direct link to the article A Complete Guide to CSS Grid
grid layout

A Complete Guide to CSS Grid

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
Avatar of Chris House
Chris House on May 12, 2021 (Updated on Feb 9, 2023)
Direct link to the article Building a Settings Component
layout

Building a Settings Component

This is a tremendous CSS-focused tutorial from Adam Argyle. I really like the “just for gap” concept here. Grid is extremely powerful, but you don’t have to use all its abilities every time you reach for it. Here, Adam …

Avatar of Chris Coyier
Chris Coyier on Apr 14, 2021 (Updated on Apr 15, 2021)
Direct link to the article SmolCSS
layout

SmolCSS

A wonderful collection of little layout-related CSS snippets from Stephanie Eckles that serves both as a quick reference and a reminder of how straightforward and powerful CSS has become.

Random things to note!…

Avatar of Chris Coyier
Chris Coyier on Feb 24, 2021
Direct link to the article Responsible Web Applications
accessibility layout web components

Responsible Web Applications

Joy Heron bought a cool domain name and published an article there:

Luckily, with modern HTML and CSS, we can create responsive and accessible web apps with relative ease. In my years of doing software development, I have learned some

…
Avatar of Chris Coyier
Chris Coyier on Feb 12, 2021
Direct link to the article Exploring the Complexities of Width and Height in CSS
height layout width

Exploring the Complexities of Width and Height in CSS

The following article is co-authored by Uri Shaked and Michal Porag.

Let’s explore the complexities of how CSS computes the width and height dimensions of elements. This is based on countless late-night hours debugging and fiddling with lots of …

Avatar of Uri Shaked
Uri Shaked on Feb 5, 2021 (Updated on Mar 1, 2021)
Direct link to the article #198: About the Position Property
layout position

#198: About the Position Property

  • static: the default
  • relative: allows you to nudge around with top/right/bottom/left, making z-index work, gives you a positioning context
  • absolute: top/right/bottom/left moves the element
…
Avatar of Chris Coyier
Chris Coyier on Nov 20, 2020
Direct link to the article #196: Learning Grid & Flexbox with Kyle Simpson
flexbox grid layout

#196: Learning Grid & Flexbox with Kyle Simpson

Kyle is a JavaScript guy. He knows a ton about the web, and plenty about CSS too, but isn’t as up-to-date on modern CSS layout tools like flexbox and grid. We didn’t go from 0 to 100 here, but …

Avatar of Chris Coyier
Chris Coyier on Oct 30, 2020
  • 1
  • 2
  • 3
  • ...
  • 4
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top