Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Posts Tagged ‘CSS Grid’.

We are pleased to present below all posts tagged with ‘CSS Grid’.

Naming Things In CSS Grid Layout

When first learning how to use Grid Layout, you might begin by addressing positions on the grid by their line number. This requires that you keep track of where various lines are on the grid, and also be aware of the fact the line numbers reverse if your site is displayed for a right-to-left language.

Naming Things In CSS Grid Layout

Built on top of this system of lines, however, are methods that enable the naming of lines and even grid areas. Using these methods enables easier placement of items by name rather than number, but also brings additional possibilities when creating systems for layout. In this article, I’ll take an in-depth look at the various ways to name lines and areas in CSS Grid Layout, and some of the interesting possibilities this creates.

Read more...

CSS Grid Challenge: Winners and Templates

CSS Grid is becoming the new layout standard for the web, and we are all still experimenting with what we can achieve with it. Some folks assume that CSS Grid is just a replacement for table layouts or Flexbox — but that's simply not true. Some also think that they can use CSS Grid to replicate more advanced print layouts, which brings us all closer to what's possible. Obviously print isn't web, but we can experiment with some of the techniques from print on the web, too.

CSS Grid Challenge 2017: The Winners

One of the main reasons behind the idea of the CSS Grid Challenge was to have some starting points for layouts, and show what can be achieved with CSS Grids today. Well, we received some many great submissions that it was really hard to choose the one winner — there are so many submissions who deserve to win first place.

Read more...

CSS Grid Gotchas And Stumbling Blocks

In March this year, CSS Grid shipped into production versions of Chrome, Firefox and Safari within weeks of each other. It has been great to see how excited people are about finally being able to use it to solve real problems.

CSS Grid Gotchas And Stumbling Blocks

CSS Grid is such a different way of approaching layout that there are a number of common questions I am asked as people start to use the specification. This article aims to answer some of those, and will be one in a series of articles on Smashing Magazine about layouts.

Read more...

The CSS Grid Challenge: Build A Template, Win Some Smashing Prizes!

Layout on the web has always been tricky, but with CSS Grid being now supported in all major browsers, most of the hacks that helped to achieve complex layouts have become obsolete. Firefox even has a CSS Grid Inspector built in, so that there’s nothing to hold you back from making even the most challenging flexible layout reality.

The CSS Grid Challenge: Build A Template, Win A Prize!

To explore the possibilities and features of CSS Grid together, we’d love to invite you to a little contest. Because there’s nothing better to completely grasp a new technology as getting your hands dirty and playing with it, right?

Read more...

Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid

Earlier this year, support for CSS grid layout landed in most major desktop browsers. Naturally, the specification is one of the hot topics at meet-ups and conferences. After having some conversations about grid and progressive enhancement, I believe that there’s a good amount of uncertainty about using it. I heard some quite interesting questions and statements, which I want to address in this post.

Progressively enhanced CSS Layout, with Flexbox and CSS Grid.

“When can I start using CSS grid layout?” “Too bad that it’ll take some more years before we can use grid in production.” “Do I need Modernizr in order to make websites with CSS grid layout?” “If I wanted to use grid today, I’d have to build two to three versions of my website.” The CSS grid layout module is one of the most exciting developments since responsive design. We should try to get the best out of it as soon as possible, if it makes sense for us and our projects.

Read more...

Building Production-Ready CSS Grid Layouts Today

Industries often experience evolution less as slow and steady progress than as revolutionary shifts in modality that change best practices and methodologies seemingly overnight. This is most definitely true for front-end web development.

Building Production-Ready CSS Grid Layouts Today

Our industry thrives on constant, aggressive development, and new technologies emerge on a regular basis that change the way we do things in fundamental ways.

Read more...

The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment

Editor’s note: Please note that this article is quite lengthy, and contains dozens of CodePen embeds for an interactive view. The page might take a little while to load, so please be patient.

Layout on the web is hard. The reason it is so hard is that the layout methods we've relied on ever since using CSS for layout became possible were not really designed for complex layout. While we were able to achieve quite a lot in a fixed-width world with hacks such as faux columns, these methods fell apart with responsive design. Thankfully, we have hope, in the form of flexbox — which many readers will already be using — CSS grid layout and the box alignment module.

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout

In this article, I'm going to explain how these fit together, and you'll discover that by understanding flexbox you are very close to understanding much of grid layout.

Read more...
1

↑ Back to top