It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
Eric Meyer, talking to himself:
How long until I can actually use Grid, then? Two or three years?
March 2017. So about four months from now.
… Read article “CSS Grid!”Grid sounds like tables 2.0. I thought we all agreed tables for layout were a bad idea.
We agreed table markup for layout was a bad idea
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element’s children (which become Grid Items).… Read article “A Complete Guide to Grid”
The following is a guest post by Oliver Williams. Oliver has been working with CSS grid layout and has learned quite a bit along the way. In this article he’s going to hop around to different concepts that he’s learned on that journey. I like this idea of learning little bite-sized chunks about grid layout, through isolated examples where possible. That makes learning the whole thing a bit less intimidating.… Read article “Things I’ve Learned About CSS Grid Layout”
I was watching Rachel Andrew talk about CSS Grid Layout yesterday at An Event Apart. Grid is amazing and the day will soon come where it’s a dominant web layout tool of choice. That day isn’t here yet though, as no stable browser is shipping the latest version of the spec (it’s behind a flag at best).
The good news is that, as of just a few days ago, the spec is really stable and has entered “Candidate Recommendation” … Read article “Will we be flattening our HTML for CSS Grids?”
The purpose of a sticky footer is that it “sticks” to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.… Read article “Sticky Footer, Five Ways”
Two sentences from Rachel Andrew that explain when to reach for which layout choice:
Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.
Flexbox can wrap, making it sorta-kinda two dimensions, but it still flows in a single dimension.… Read article “Should I use Grid or Flexbox?”
Susy provides you with the tools to build your own grid layouts that match the needs of your website. It gives you the freedom and flexibility to build any design that you can imagine. It doesn’t matter if your design has 5, 14 or 48 columns. Unequal width columns? Susy’s got you covered.
Why would you pick Susy over the million other frameworks out there on the internet? You may never even heard of it before. What if it’s beauty … Read article “Build Web Layouts Easily with Susy”
The grid-template-rows and grid-template-columns properties are the primary CSS properties for establishing a grid layout, once the element is a grid context (display: grid;).
There are also -ms-grid-columns and -ms-grid-rows, which are the old IE version of this. You may want to consider Autoprefixing to get them, or not, your call. There was also a weird period where they were grid-definition-columns and grid-definition-rows, but that’s not a thing anymore.
Here’s an example derived from Microsoft’s … Read article “grid-template-columns / grid-template-rows”
The grid-row and grid-column properties define which row or column an element will be displayed on.
.element {
grid-row: 1 / 2;
grid-column: 3 / -1;
}Here’s an explicit 3 × 3 grid where these properties are used to place grid items onto it in specific places:
CodePen Embed Fallback Related Browser Support… Read article “grid-row / grid-column”
Let’s say you have a bunch of images you want to display, and the goal is to get them edge-to-edge on the browser window with no gaps. Just because you think that would be cool. They are of all different sizes. You don’t care if they are resized, but they should maintain their aspect ratio. … Read article “Seamless Responsive Photo Grid”
