spaceninja + cssgrid   249

Getting Started with CSS Grid: Three Coding Approaches
A step-by-step tutorial on understanding and building two-dimensional layouts using Grid’s flexible syntax.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
yesterday by spaceninja
Getting Started with CSS Grid: Anatomy
An overview of when to use CSS Grid, all the parts that make it whole, and how to inspect your layouts.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
yesterday by spaceninja
Writing Modes And CSS Layout
An understanding of CSS Writing Modes is useful if you want to work with vertical scripts, or change writing mode for creative reasons. However, they also underpin our new layout methods, and those ideas are increasingly being applied across all of CSS. In this article, find out why Rachel Andrew believes understanding writing modes is so important.
fridayfrontend  writing-mode  layout  css  block  inline  cssgrid  flexbox 
14 days ago by spaceninja
How to add Flexbox fallback to CSS Grid
I shared how to build a calendar with CSS Grid in the previous article. Today, I want to share how to build a Flexbox fallback for the same calendar.
fridayfrontend  css  cssbasics  grids  cssgrid  layout  flexbox  fallback 
20 days ago by spaceninja
Bringing CSS Grid to WordPress Layouts
So, this is great, and knowing that we can do so many more things today than we could compared to a few years ago probably makes you want to give Grid a try, at last. If you are working on a WordPress project, you're back facing the two options mentioned above: do we start from scratch and manually coding a template, or is there something that can give us a little help? Luckily, there is a plugin that might interest you, one that we have created with a dual goal in mind:
fridayfrontend  css  cssgrid  grids  layout  wordpress  plugins 
20 days ago by spaceninja
Grids All The Way Down by Rachel Andrew
Two years have passed since Grid Layout launched across all major browsers. However, as it was landing and becoming available for us to use in production, work on the spec continued. Due to this work, Level 2 of the Grid Specification contains the most wanted feature as people come to grips with the spec — subgrid.

In this talk, Rachel will explain what subgrid is, the problems that it will solve for web designers and developers, and the things that it will make possible. She'll also take a look at some of the other things that are coming to CSS Layout, and how you can get involved in pushing all of these new things forward.
fridayfrontend  video  css  grids  cssgrid  layout  subgrid 
20 days ago by spaceninja
How to make your HTML responsive by adding a single line of CSS
In this article, I’ll teach you how to use CSS Grid to create a super cool image grid which varies the number of columns with the width of the screen. And the most beautiful part: the responsiveness will be added with a single line of CSS.
fridayfrontend  css  cssbasics  responsive  grids  cssgrid  layout 
27 days ago by spaceninja
How to build a calendar with CSS Grid
Building a calendar with CSS Grid is actually quite easy. I want to show you how to do it.
fridayfrontend  css  grids  cssgrid  layout  calendars  cssbasics 
27 days ago by spaceninja
Intrinsically Responsive CSS Grid with minmax() and min()
CSS Grid is now widely supported across modern browsers, and there are lots of folks doing great work with it! But unfortunately, one of the most useful features of the specification doesn’t quite work as advertised. Specifically, it’s not possible to create an “intrinsically responsive grid” — that is, a grid that is responsive based on the size of its container, without the use of media queries. But thanks to some standards that are now available in some browsers and on their way to others, we can fix that!
fridayfrontend  css  layout  grids  cssgrid  responsive  minmax  min 
27 days ago by spaceninja
Debugging CSS Grid with Firefox Dev Tools
CSS Grid is mostly composed of rows, columns, cells, tracks, gaps etc. These things are not elements by themselves; hence, it can be really tasking to visualize and debug them. In this post, we’ll look at a few ways we can do it by using the inbuilt developer tools in the Firefox browser.
fridayfrontend  css  cssbasics  cssgrid  grids  layout  firefox  devtools  debugging 
4 weeks ago by spaceninja
Fun places to learn CSS Layout –  Part 2: Grid Layout
The syntax might be a little bit complex to learn if you come from good old floats, so here are some fun places, tutorials and sand box sites to help you learn and master everything you need to know about Grid Layout. Enjoy!
fridayfrontend  cssbasics  css  layout  cssgrid  grids 
6 weeks ago by spaceninja
Debugging CSS Grid Part 3: Auto-flow, Order and Item Placement
When it comes to building a layout, CSS Grid offers us a number of different choices for placing items. In this article we’ll take a look at the different placement methods, how to use auto-flow to avoid having to explicitly place every item, and why sometimes grid items might not be placed where you expect them to be.
fridayfrontend  css  cssgrid  grids  layout  grid-auto-flow  order 
6 weeks ago by spaceninja
Bringing new CSS techniques to production
The features available to web developers are constantly evolving. In recent years we’ve seen exciting new abilities that were beyond my imagination when I started building websites. They have changed what it means to design and build for the web.
fridayfrontend  css  features  featurequeries  customproperties  variables  grids  cssgrid  layout 
6 weeks ago by spaceninja
Placing, Spanning and Density in CSS Grid
The most common things you learn in CSS Grid is usually related to the grid container and less about the grid items. A generic grid definition applied to the grid container is enough for a basic layout structure. However, when you need more control over the contents of the grid, the grid container can only help with very little cases.
fridayfrontend  cssbasics  css  cssgrid  grids  layout 
7 weeks ago by spaceninja
Kandinsky Geburstag Invite
Working to create a fully fluid/responsive version of Kandinsky's 60th birthday invitation (designed by Herbert Bayer). Work in progress!
fridayfrontend  css  cssbasics  layout  grids  cssgrid 
8 weeks ago by spaceninja
CSS Grid: Card Variations
Cards have the same HTML structure, altered with CSS Grid.
fridayfrontend  layout  cssgrid  cssbasics  grids  cards 
8 weeks ago by spaceninja
Building a Conference Schedule with CSS Grid
I gained a new appreciation for CSS Grid when building a flexible layout for a conference schedule. The needs of the project aligned perfectly with grid’s strengths: a two-dimensional (vertical and horizontal) layout with complex placement of child elements. In the process of building a proof of concept, I found a few techniques that made the code highly readable and outright fun to work with. The resulting demo included some interesting uses of CSS Grid features and forced me to grapple with some details of grid you don’t run into in every day.
fridayfrontend  css  cssgrid  grids  layout  schedules 
8 weeks ago by spaceninja
Six assumptions which could break your website
A mistake consistently made by some of the biggest websites shows they are thinking about responsive web design incorrectly.
fridayfrontend  cssbasics  responsive  layout  mobile  touch  cssgrid 
9 weeks ago by spaceninja
The State of CSS 2019
But as the State of JS survey has grown in depth and length, we've also realized just how complex the web ecosystem truly is. And that while JavaScript is a big part of it, it's by no means the only one.

Which is why it only made sense to expand horizontally into new territories, the first of which is CSS, a.k.a. JavaScript's arch-nemesis and/or best friend depending on who you ask.

And after a few months of data processing and visualizing, I'm happy to finally be able to share with you the first ever State of CSS survey results!
fridayfrontend  css  surveys  flexbox  cssgrid  bootstrap  utility  bem  sass 
9 weeks ago by spaceninja
CSS Grid Generator
I noticed a lot of people weren't using Grid because they felt it was too complicated and they couldn't understand it. Grid is capable of so much, and this small generator only touches on a fraction of the features. The purpose of this is so people get up and running quickly, and create more interesting layouts.
fridayfrontend  css  cssbasics  cssgrid  grids  layout  generator 
11 weeks ago by spaceninja
Create a split, faux-container layout with CSS Grid and Flexbox
One of my favourite things about CSS Grid and Flexbox is that you can create unconventional layouts a heck of a lot easier than before we had proper layout tools available to us. One example of these layouts is splitting the traditional center container that most websites have in two, while maintaining its position.
fridayfrontend  cssbasics  css  layout  grids  flexbox  cssgrid 
may 2019 by spaceninja
Digging Into The Display Property: Grids All The Way Down
Continuing a series on the display property in CSS, this time Rachel Andrew takes a look at what happens when you use grid as a value of display, with added information about how subgrid changes that behavior.
fridayfrontend  css  grids  layout  cssgrid  subgrid 
may 2019 by spaceninja
Debugging CSS Grid – Part 2: What the Fr(action)?
In the second part of the Debugging CSS Grid series, we’ll take a look at fr (or fraction) units. Fr units are very useful for sizing grid tracks, and vastly simplify the process of building responsive layouts. But there are one or two unexpected behaviours you may run into if you don’t understand how they work. This article will aim to demystify these.
fridayfrontend  css  cssbasics  layout  flexbox  grids  cssgrid  fr 
may 2019 by spaceninja
The Dark Side of the Grid (Part 2)
CSS Grid layout is powerful and flexible. It's great for our development experience, but it may come at the cost of user experience and accessibility if we don’t use it responsibly. This article series gives you an overview of potential implementation pitfalls; or, in other words, the dark side of the grid.
fridayfrontend  css  cssgrid  grids  layout  accessibility 
may 2019 by spaceninja
Two simple methods to vertically and horizontally center content with CSS
Centering with CSS—especially vertically, used to be a bit of an in-joke, back in the old days. I emphasise old days because vertical centering hasn't been an issue since Flexbox gained majority support, 7 years ago! I primarily use Flexbox for vertical centering, but Grid can also be useful. In this post, we’re going to use both to create a little utility class.
fridayfrontend  css  cssbasics  layout  grids  flexbox  cssgrid  centered 
may 2019 by spaceninja
Understanding grid placement through building a HTML periodical table
I’ve been using CSS grid to build layouts for quite a while now, and all my designs to date involved either a handful of explicitly placed individual grid items, or 100% automatic placement. I hadn’t had to design the gaps between the grid before, but then one fine day in March, I found a HTML periodical table on WebsiteSetupOrg.

It looks different now than when I first saw it, because the version I saw spelt out HTML and I was totally into that. Upon my usual right-click inspect, I noticed that the layout wasn’t using Grid, but my Grid-infused brain thought it could, so I decided to recreate the design using a Grid layout.
fridayfrontend  cssbasics  css  grids  cssgrid  layout 
may 2019 by spaceninja
Create a responsive grid layout with no media queries, using CSS Grid
Embracing the flexible nature of the web gives us powerful, resilient front-ends, where instead of using specific sizes, we give elements sensible boundaries and let them auto-fill where possible. I embrace this mentality as much as possible and roll utilities out like this one for grid layouts. It’s a fully responsive grid that uses no media queries to work across all viewports and it’s all thanks to CSS Grid.
fridayfrontend  css  cssbasics  layout  cssgrid  grids  responsive 
may 2019 by spaceninja
Debugging CSS Grid – Part 1: Understanding implicit tracks
The biggest issue I’ve seen people struggle with is accidentally creating extra grid tracks, which can throw an entire layout into disarray. These extra tracks are known as _implicit_ tracks, and they are created by placing an item outside of the _explicit_ grid’s boundary. To get the most out of Grid, it’s a good idea to understand the concepts of the _explicit_ and _implicit_ grid, and their relationship to each other.
fridayfrontend  css  cssgrid  grids  layout  explicit  implicit  debugging  troubleshooting 
may 2019 by spaceninja
Thinking With Grids by Jen Simmons
CSS Grid revolutionizes how we create layouts on the web — but how exactly should we use it? When someone emails you a PDF, how do you know the best way to get started? Where should you use what code? How do you translate a static drawing into a dynamic layout? In the spirit of Smashing’s “no slides” rule, Jen Simmons will live code a design from start to finish (or however close to finish she gets before time’s up). No net, no preparation. How does someone in the real world create a layout using the tools of Intrinsic Web Design?
fridayfrontend  video  css  cssgrid  grids  layout 
may 2019 by spaceninja
Controlling leftover Grid items with pseudo-selectors
I recently wrote about some of the cases where you might want to use Grid instead of flexbox, and vice-versa. One of the scenarios I pointed out *might* be a better case for using flexbox is when you want to control the behaviour of any leftover grid items that don’t fill an entire row.
fridayfrontend  css  layout  grids  flexbox  cssgrid  widows  nth-child 
april 2019 by spaceninja
CSS Grid: Style Guide
What could go wrong if I were to do a style guide with 5 color palettes without any planning? 🤷‍♀️

Narrator: A lot of things could go wrong.
fridayfrontend  cssbasics  css  cssgrid  color  styleguide 
april 2019 by spaceninja
CSS Subgrid News and demos
A couple of weeks ago I spoke at Frontend NE in Newcastle, a big part of my talk was explaining what the CSS Grid Subgrid feature from Grid Level 2 would contain. I was given access to a Try build of Firefox Nightly, which has an early implementation of the feature. Here are a few screenshots. These include links to my CodePen examples so you can see the code for the subgrid elements.
fridayfrontend  css  cssgrid  grids  layout  subgrid 
april 2019 by spaceninja
Are nested grids like nested tables?
A thing I keep hearing, and especially when talking about subgrid is, “nested grids … isn’t that like tables within tables in the olden days?”

It is not. This is why.
fridayfrontend  cssbasics  css  cssgrid  grids  layout  tables  nesting 
april 2019 by spaceninja
Digging Into The Display Property: The Two Values Of Display
We talk a lot about Flexbox and CSS Grid Layout, but these layout methods are essentially values of the CSS display property, a workhorse of a property that doesn’t get a lot of attention. Rachel Andrew takes a better look in a short series.
fridayfrontend  display  flexbox  cssgrid  grids  layout  inline  blocks 
april 2019 by spaceninja
How to Keep Your CSS Grid Layouts Accessible
CSS Grid makes it possible to create two-dimensional layouts by arranging elements into rows and columns. It allows you to define any aspect of your grid, from the width and height of grid tracks, to grid areas, to the size of gaps. However, CSS Grid can also lead to accessibility issues, mainly for screen reader and keyboard-only users. This guide will help you avoid those issues.
fridayfrontend  cssbasics  css  cssgrid  grids  layout  accessibility  order 
march 2019 by spaceninja
Box Alignment by Chen Hui Jing
The web is fundamentally boxes. Every element in the document tree is a box. A lot of frustration with CSS often arises from trying to wrangle all the content on the page into their proper locations. CSS has gradually expanded over the years, granting us an increasing degree of control over the alignment, positioning and layout of these boxes.

CSS is ultimately a holistic technology, in that, even though you can use properties in isolation, the full power of CSS shines through when used in combination. This talk will not only dive into how box alignment works, but also cover its interactions with other key parts of CSS layout, like display and writing-mode, as well as show how this module will continue to evolve, making layout even easier moving forward.
fridayfrontend  video  css  alignment  layout  cssgrid  grids  flexbox  box-alignment 
march 2019 by spaceninja
CSS Grid Experiment: A Floor Plan
Fascinating CSS experiment to draw the floorplan of an apartment using CSS Grid.
fridayfrontend  css  cssbasics  cssgrid  grids  layout  maps 
march 2019 by spaceninja
Fit For Purpose: Making Sense of the New CSS by Eric Meyer
If 2017 was the year of new CSS capabilities, 2018 was the year of trying to figure out what to do with them all. When should boxes flex, and when should they be gridded? What are the best ways to manage your team’s approach to all these new powers? What’s ready for production, and what’s useful in the shop? In this hour-long talk, Eric Meyer turns his experienced eye for CSS on the new technologies that emerged in 2018 and explores different ways of using and thinking about them.
fridayfrontend  video  css  flexbox  cssgrid  grids  layout  supports 
march 2019 by spaceninja
How to convince your team to adopt CSS Grid
Are you keen to jump into CSS Grid Layout but having trouble convincing the rest of your team (whether your peers or your managers)? Someone asked me recently if I had any advice for convincing a skeptical team to adopt CSS Grid into their workflow. Although I haven’t faced any major barriers on this front myself, it’s a story I hear all too often. You’re ready to dive in and work with the latest modern layout techniques, only for the higher powers to put the brakes on. Although frustrating, there is some rationality here. Let’s break that down.
fridayfrontend  css  cssbasics  layout  grids  cssgrid  support 
march 2019 by spaceninja
Sophisticated Partitioning with CSS Grid
Each postcard-sized handbill was a photocopied grid of roughly a dozen shows, and each listing within the grid was like a tiny poster. In addition to making Tinnitus Tracker a more fun experience, taking inspiration from those handbills is a good opportunity to experiment with CSS Grid, and getting started is pretty easy.
fridayfrontend  grids  layout  css  cssgrid 
march 2019 by spaceninja
The State of CSS, with Una Kravets
The memes have not been kind to CSS over the years. Remember the gif of Peter Griffin fighting with the blinds, captioned "CSS"? It has a reputation of being unwieldy and hard to use. But how much of that is still true today? Things like preprocessors have helped to hide some of the unpleasantries of CSS and APIs like flexbox, grid, and Houdini have come a long way to help make development easier.
fridayfrontend  video  css  houdini  layout  flexbox  cssgrid  sass  preprocessors  postcss 
march 2019 by spaceninja
Building Robust Layouts With Container Units
When inspecting most other grids in DevTools, you’ll notice that column widths are dependent on their parent element. This article will help you understand how to overcome these limitations using CSS variables and how you can start building with container units.
fridayfrontend  css  cssgrid  grids  layout  variables  customproperties 
march 2019 by spaceninja
Making Future Interfaces Playlist
This week's lunch video is actually a playlist of short videos by Heydon Pickering about advanced front-end techniques like CSS shapes, custom properties, and algorithmic layouts. And if that's not enough to convince you, they're also really funny. Highly recommended.
fridayfrontend  video  css  shapes  customproperties  variables  svg  flexbox  grids  layout  cssgrid  containerqueries 
march 2019 by spaceninja
Content-based grid tracks and embracing flexibility
Something I love about CSS is that it lets us define visual design for unknown content. This is kind of magic. We can even size things based on content, with min-content, max-content and auto. This post is about how that works in CSS Grid Layout, and what usage in real projects would mean.
fridayfrontend  css  cssbasics  grids  layout  cssgrid  min-content  max-content  grid-area 
march 2019 by spaceninja
Look Ma, No Media Queries! Responsive Layouts Using CSS Grid
Not only has CSS Grid reshaped the way we think and build layouts for the web, but it has also contributed to writing more resilient code, replacing "hacky" techniques we've used before, and in some cases, killing the need to rely on code for specific resolutions and viewports. What's so cool about this era in web development is that we're capable of doing more and more with fewer lines of code.

In this article, we'll start dipping our toes into the power of CSS Grid by building a couple of common responsive navigation layouts. It's easier than what you may think, and since CSS Grid was built with responsiveness in mind, it'll take less code than writing media queries all over the place. Let’s do this!
fridayfrontend  css  grids  cssgrid  layout  responsive  mediaqueries 
march 2019 by spaceninja
The Dark Side of the Grid (Part 1)
Grid offers many ways of building layouts and it challenges us to rethink the way we approach them. This flexibility is great for our development experience, but it may come at the cost of user experience and accessibility if we don’t use it responsibly. This series of articles will give you an overview of potential implementation pitfalls, or in other words, the dark side of the grid.
fridayfrontend  css  grids  cssgrid  layout  accessibility  ux  semantics  subgrid  displaycontents 
march 2019 by spaceninja
Using CSS Grid the right way
This means that CSS Grid has a pretty high skill floor — a developer needs to learn and internalize lots of new information in order to be effective with it. Once you’re above that skill floor, Grid is an amazing ally in layout creation. Below that skill floor, Grid is an encumbrance. You wonder why you’re bothering to use it at all, since it seems to require lots of additional work for little reward. In this post, I want to help you overcome that skill floor by showing you the most effective ways to leverage the Grid spec.
fridayfrontend  css  grids  cssgrid  layout 
february 2019 by spaceninja
To Grid or to Flex?
In this article I want to unpack when and where you might want to use Grid or flexbox, and some reasons for choosing one or the other. What surprised me about reading the responses in the thread was the number of people stating that they would only use Grid for page-level layout, and flexbox for everything else. If you take this as a rule, then you’re severely limiting yourself when it comes to Grid’s power. The main piece of advice I would give is to take every design individually, analyse the options available and don’t make assumptions about which technology you need. Here are some of the questions you could ask yourself when it comes to choosing a layout method.
fridayfrontend  css  cssbasics  grids  layout  cssgrid  flexbox 
february 2019 by spaceninja
Quick! What's the Difference Between Flexbox and Grid?
There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They can stretch and shrink, they can center things, they can re-order things, they can align things... There are plenty of layout situations in which you could use either one to do what we need to do, and plenty of situations where one is more well-suited than the other. Let's focus on the differences rather than the similarities:
fridayfrontend  css  cssbasics  layout  grids  cssgrid  flexbox 
february 2019 by spaceninja
Solving a Tricky Layout Problem with CSS Grid
This article is a case study on a particular component with a unique layout and a set of constraints. Building a layout that worked for the large number of requirements, as well as unknown content, required applying lateral thinking and a great deal of problem solving to find the right solution.
fridayfrontend  css  cssbasics  layout  grids  cssgrid  flexbox 
february 2019 by spaceninja
My Grid Layout
My site’s design came through a lot of iterations, including the latest complete rewrite and a partial redesign, but its layout is something I used for a while. In this article, I’ll describe what I tried to achieve with it and how it was re-implemented using CSS Grids.
fridayfrontend  css  cssbasics  layout  grids  cssgrid 
february 2019 by spaceninja
Your CSS Layout Toolkit for 2019, by Rachel Andrew
As we head into the final quarter of 2018, let’s take a look at where we are with CSS Grid Layout, and CSS layout in general. In this talk you will learn the key elements of layout. The things you need to know as you plan your projects now and into the next year. Rachel will take you on a tour of what we have now and what is coming next, with plenty of practical advice and takeaway code examples, so that you can start to use these features in your own work.
fridayfrontend  video  layout  css  grids  cssgrid  flexbox  multicol 
january 2019 by spaceninja
Why we need CSS subgrid
There has been a lot of discussion over the last 2 years about the use cases for subgrid, how it should be implemented, and even some debate over whether you even need it. A lot of that discussion was centered around two other approaches that can handle many of the same problems as subgrid: nested grids and display: contents. This article will explore both of those approaches, and I hope to demonstrate that there are still some very valid cases where a subgrid is truly needed, and others where it is not strictly needed, but would make for a much cleaner solution.
fridayfrontend  css  cssbasics  cssgrid  layout  grids  subgrid 
january 2019 by spaceninja
Complicated Checkerboard Layouts with CSS Grid & SVGs
I’m so excited when my clients push the boundaries of “normal” web design and allow me to use some of the latest cool CSS available. I was given this square based, checkerboard Gridded design and told to run off and see what I could do. This design presented a lot of issues and it took a lot of upfront thinking, as well as 4 or 5 different routes, before I found the perfect balance between usability, responsiveness, and keeping the design integrity. There are already a lot of tutorials on CSS Grid, but none of them address the issues I was having, especially when it came to keeping everything square, matching with the background checkerboard, and being responsive at the same time (have I broken your brain yet!?).
fridayfrontend  css  cssbasics  layout  cssgrid  grids  svg 
january 2019 by spaceninja
Piecing Together Approaches for a CSS Masonry Layout
Masonry layout, on the web, is when items of an uneven size are laid out such that there aren't uneven gaps. I would guess the term was coined (or at least popularized) for the web by David DeSandro because of his popular Masonry JavaScript library, which has been around since 2010. JavaScript library. Nothing against JavaScript, but it's understandable we might not want to lean on it for doing layout. Is there anything we can do in CSS directly these days? Sorta.
fridayfrontend  css  cssbasics  layout  masonry  javascript  flexbox  cssgrid  multicol 
january 2019 by spaceninja
Angular, Autoprefixer, IE11, and CSS Grid Walk into a Bar…
As toolchains grow and become more complex, unless you are expertly familiar with them, it’s very unclear what transformations are happening in our code. Tracking the differences between the input and output and the processes that code underwent can be overwhelming. When there’s a problem, it’s increasingly difficult to hop into the assembly line and diagnose the issue and often there’s not an precise fix.
fridayfrontend  css  angular  autoprefixer  grids  layout  cssgrid  ie11 
january 2019 by spaceninja
Stepping away from Sass
I also unintentionally, (at least at first) removed all traces of Sass from my codebase. This was not something I set out to do but the more I looked at my old Sass files the more I questioned whether it was adding value to my site, or just an extra level of complexity and dependency. CSS has evolved over recent years and the problems that lead me to Sass in the first place seem to be less of an issue today.
fridayfrontend  css  sass  variables  customproperties  layout  grids  cssgrid  typography 
january 2019 by spaceninja
CSS Grid for Designers
Fast forward six years to the release of CSS Grid in early 2017. This technology removes a lot of the limitations that existed in CSS to date. But CSS Grid is not just a tool for front-end developers; designers can now think about web layout in new ways. This technology advancement is so important for designers to understand, because it means we can think about the right grid for the demands of our content.
fridayfrontend  css  layout  grids  cssgrid 
january 2019 by spaceninja
“Graduating to Grid” by Rachel Andrew
When CSS Grid Layout shipped into multiple browsers in the Spring of 2017 it heralded the dawn of a new way to do layout on the web. In this video, captured live at An Event Apart Denver: Special Edition, Rachel Andrew looks at what went right or wrong in these first few months, and offers help to those struggling to transition away from legacy methods.
fridayfrontend  video  css  grids  cssgrid  flexbox  layout 
december 2018 by spaceninja
A CSS Venn Diagram
I had use for CSS shapes in a project and wanted to play around beyond what the project itself allowed. I decided to revisit my Venn diagram and create something a bit more modern and flexible. This also gave me a chance to play with CSS grid overlaps, which I had not done yet simply because I had no reason.
fridayfrontend  css  cssbasics  venn  charts  diagrams  cssgrid  shape-outside 
december 2018 by spaceninja
What's New In CSS?
Slides from my talk about what is new and interesting in CSS. Covering some of the things we can already use as well as things just recently discussed at the CSS Working Group. In addition I talk about how things become part of CSS, and how everyone can get involved.
fridayfrontend  css  grids  cssgrid  layout  subgrid  scroll-snap  shapes  conic-gradient  aspectratio  exclusions  houdini 
november 2018 by spaceninja
Editorial Layouts, Floats, and CSS Grid
Since floats aren’t compatible with CSS Grid, aligning floated elements to an established grid can be a real headache. This is a nontrivial impediment to traditional editorial layouts’ ability to take advantage of Grid’s benefits.
css  grids  layout  cssgrid  floats  exclusions 
november 2018 by spaceninja
CSS Frameworks Or CSS Grid: What Should I Use For My Project?
Have you ever considered whether CSS Grid can actually replace the need for CSS frameworks or third-party component libraries? In doing so, Rachel Andrew discovered a range of reasons people use a third-party framework and the positive and negative things about doing so.
fridayfrontend  css  cssbasics  frameworks  grids  cssgrid  layout  bootstrap  foundation 
november 2018 by spaceninja
Simple Named Grid Areas
I think of named grid areas in CSS Grids as bring-your-own syntactic sugar. You don't absolutely need them (you could express grid placement in other ways), but it can make that placement more intuitive.
fridayfrontend  css  cssbasics  grids  cssgrid  layout 
november 2018 by spaceninja
Article Layout with CSS Grid
This code creates three flexible grid columns. The outer columns use minmax(1.2rem, 1fr). This makes these columns a minimum width of 1.2rem and a maxiumum width of 1fr. The inner column for text uses minmax(auto, 57ch). The minimum size of auto makes the column size to the width of the text as it wraps — so it looks great on tiny screens. The maximum size of 57ch makes sure that column never gets bigger than 57 characters, keeping the text from getting too wide and unreadable on huge screens.
fridayfrontend  css  cssbasics  grids  cssgrid  layout 
november 2018 by spaceninja
Concise Media Queries with CSS Grid
CSS grid definitely has the advantage when it comes to quickly organizing layouts. Even simple layouts require minimal effort with CSS grid compared to flexbox. With the `grid-template-areas` property, we can write responsive layouts with a single rule inside a media query. That’s because `grid-template-areas` defines a visual grid system on both axes at the once.
fridayfrontend  css  layout  mediaqueries  grids  cssgrid  flexbox 
october 2018 by spaceninja
Everything You Know About Web Design Just Changed, by Jen Simmons
2017 saw a sea change in web layout, one that few of us have truly come to grips with. We’re standing at the threshold of an entirely new era in digital design—one in which, rather than hacking layouts together, we can actually describe layouts directly. The benefits will touch everything from prototyping to custom art direction to responsive design. In this visionary talk, rooted in years of practical experience, Jen will show you how to understand what’s different, learn to think through multiple stages of flexibility, and let go of pixel constraints forever.
intrinsic  design  layout  css  fridayfrontend  video  cssgrid  grids  flexbox 
october 2018 by spaceninja
Negative Grid Lines
Using negative grid lines allows us to place items relative to the end of the grid. This is especially useful if we have a large grid – it means we don’t have to work out the exact line number from the start, we could simply place it from the end.
fridayfrontend  css  cssgrid  grids  layout 
october 2018 by spaceninja
Understanding the difference between grid-template and grid-auto
With all the new properties related to CSS Grid Layout, one of the distinctions that always confused me was the difference between the grid-template-* and grid-auto-* properties. Specifically the difference between grid-template-rows/columns and grid-auto-rows/columns. Although I knew they were to do with the explicit and implicit grid systems, at face value they seemed to be doing almost the same thing. In actual fact, they have little in common and are used to achieve different things.
fridayfrontend  css  cssbasics  grids  cssgrid  layout 
october 2018 by spaceninja
Creating Horizontal Scrolling Containers the Right Way [CSS Grid]
In this article, I want to explore how the flexibility of CSS Grid can help implement a horizontal scrolling component while dealing with some of the pitfalls that comes with it.
fridayfrontend  css  cssbasics  cssgrid  grids  layout 
october 2018 by spaceninja
Creating Layouts with CSS Grid
CSS Grid is a relatively recent layout specification, shipping in most browsers as of October 2017. Grid allows us to create layouts that were previously impossible, or only possible with lots of DOM operations.
fridayfrontend  css  cssbasics  grids  layout  cssgrid 
october 2018 by spaceninja
How I remember CSS Grid properties
The syntax for CSS Grid is foreign and hard to remember. But if you can’t remember CSS Grid’s syntax, you won’t be confident when you use CSS Grid.
fridayfrontend  cssbasics  css  cssgrid  grids  layout 
october 2018 by spaceninja
CSS Layout cookbook
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
fridayfrontend  cssbasics  layout  cssgrid  grids  flexbox  columns 
october 2018 by spaceninja
Preventing a Grid Blowout
Chris Coyer presents a simple layout and talks about how CSS grid handles things when the grid contents are too big for the layout you've described.
fridayfrontend  css  grids  cssgrid  layout 
october 2018 by spaceninja
From Bootstrap to CSS Grid: Move Forward Without Breaking Anything! by Natalya Shelburne
Don’t let still being on a float based layout (like Bootstrap) stop you from using CSS Grid. Learn how the power of CSS combined with feature queries allow you to declare `display: grid` with confidence on any project. Finally, you can get excited about designing for web again!
fridayfrontend  css  grids  layout  cssgrid  bootstrap  video 
october 2018 by spaceninja
Don't use empty or low content for your design system grid examples
But anyway, say you're setting up a grid that uses mixed values for column widths like this. Don't do that with totally empty columns, otherwise, you'll get a false sense of how those columns will behave.
fridayfrontend  cssbasics  grids  cssgrid  flexbox  layout 
october 2018 by spaceninja
I created a copy of Red Onion's Daily Prophet using CSS Flexbox
If you have ever seen Red Onion’s Daily Prophet page then you’d know that it's a really awesome and creative layout which is built using CSS Grid. It’s similar to an old-style print layout which seems quite challenging to replicate on the web. Creating a clone of it using flexbox instead of css grid would be a really good challenge if you want to learn how to use the flexbox layout.
fridayfrontend  css  cssbasics  grids  layout  cssgrid  flexbox  harrypotter 
september 2018 by spaceninja
Unlocking the power of CSS Grid Layout, by Rachel Andrew
Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities.

In this talk Rachel will be concentrating on a couple of these areas, CSS Box Alignment and CSS Sizing. Rachel will show you practical ways in which a little bit of knowledge in these areas can unlock the full potential of the Grid Specification. You’ll learn how to create useful components and to start thinking of ways in which you can solve design and interface problems in more creative ways.
fridayfrontend  css  cssgrid  layout  grids  video 
september 2018 by spaceninja
Progressively Enhanced CSS Layouts: Floats to Flexbox & Grid
It can be difficult to achieve complex yet flexible and responsive grid layouts. Various techniques have evolved over the years but most, such as faux columns, were hacks rather than robust design options.
fridayfrontend  css  cssbasics  layout  cssgrid  grids  flexbox  floats  progressive  enhancement 
september 2018 by spaceninja
« earlier      
per page:    204080120160

related tags

absolute  accessibility  after  alignment  angular  animation  artdirection  ascii  aspectratio  atomic  auto-fill  auto-fit  auto-placement  autoprefixer  bars  before  bem  bestpractices  blendmodes  block  blocks  bootstrap  borders  box-alignment  box-sizing  boxmodel  breakout  browsers  bugs  calculator  calendars  caniuse  cards  centered  charts  cheatsheet  clip-path  color  columns  comics  comments  components  conic-gradient  containerqueries  contents  css  css-in-js  cssbasics  cssgrid  csswg  customproperties  debugging  design  designsystem  devtools  diagrams  dinosaurs  display  displaycontents  edge  emoji  empty  enhancement  example  exclusions  explicit  fallback  featurequeries  features  firefox  fixed  flexbox  floats  fluid  focus-within  footer  forms  foundation  fr  frameworks  fridayfrontend  galleries  games  generated  generator  github  gradients  graphs  grid-area  grid-auto-flow  grid-gap  grids  guides  harrypotter  headers  hex  history  holygrail  houdini  ie  ie10  ie11  implicit  inline  intersectionobserver  intrinsic  itcss  javascript  layout  less  logic  maps  masonry  max-content  mediaqueries  medium  min  min-content  minmax  mistakes  mixmax  mobile  multicol  multicolumns  myths  names  nesting  nth-child  oocss  order  overflow  patternlibrary  photos  plugins  position  postcss  preprocessors  progressive  pseudo-elements  pwa  quotes  react  recap  refactoring  resizeobserver  responsive  rwd  sass  schedules  scroll-snap  semantics  shape-outside  shapes  slack  smacss  specs  sticky  styleguide  subgrid  support  supports  surveys  susy  svg  tables  templates  tictactoe  tools  touch  troubleshooting  tumblr  tutorials  typography  units  utility  ux  variablefonts  variables  venn  vertical  video  viewport  widows  wordpress  writing-mode  writingmodes 

Copy this bookmark: