(Probably I was never good, but that’s a whole other conversation. I abandoned the effort to keep my CSS up-to-date around the time Fred and I started working together in 2013, and haven’t really been good as CSS since then. This sort of responsive grid system is something I know about almost exclusively through second-hand knowledge and hearsay. These “responsive grid systems” are an improvement over the 960 system I mentioned above in that they’re “responsive aware.” Based on the markup and their hidden powers, they know that as the browser window gets narrower something that was the right third of your grid system will naturally want to becomes its own grid row. More commonly, people who are confused by my invocation of “CSS Grid” are confusing it with a “responsive grid layout system.” Fred most commonly mentions and talks of to me that the Bootstrap CSS/layout/markup system comes with a 12-column grid baked in. “A CSS Grid-layout System” or “CSS Grid Framework” That idea, as the banner across the page makes clear, was more-or-less made superfluous as smartphones made it necessary for web pages to look good for devices other than desktop and laptop web browsers. When I think about web design as I first start to learn it 10 years ago, I think about the “960 pixel grid system”. Mostly commonly, I think of a 12 column grid. But suffice it to say that probably as long as there have been pages there have been attempts to apply a design-system to them.Īnd one of the better design-systems that people have applied to pages is a grid. Because I am not an experienced or educated designer, I’ll not venture to offer a history of it. So using grids for layouts is certainly older than I am. They’ve been using grid-based layout, made possible with CSS since two-thousand-and-something.īut a grid-based layout isn’t quite what I mean by “CSS Grid.” To further highlight the difference, to the whole of this article I’ll say “CSS Grid” when I’m talking about the (kind of) new CSS standard, and “grid layouts” to mean the generic idea of using a systematic grid to give a webpage, poster, or other design a sense of cohesion and pleasing symmetry. One of things I’ve struggled when trying to explain CSS Grid to people is that people are like “oh, we’ve been using grid systems in CSS for years.” And those people (Fred very much included), are right, in a way. That’s not to say I don’t intermittently write CSS for personal projects, just that I wouldn’t call myself a CSS expert. And until recently I was kind of guilty of that.īecause my interest in WordPress is mostly for simple publishing tasks, and for letting me find another place to write server-side PHP code, I really haven’t thought much about CSS in a while. But that doesn’t mean you, as a WordPress developer, can or should be writing your HTML and CSS like it was 10 years ago. And just as HTML is not specific to WordPress, neither is CSS. This is because CSS can be, and is, used anywhere HTML is. Other than knowing that WordPress has a body_class function, you mostly can learn CSS without thinking about WordPress. What I mean is that CSS is a large part of a WordPress developer’s needed expertise, but CSS knowledge is also expertise that has almost nothing to do with WordPress specifically. One of the weird things about WordPress is how “orthogonal” CSS is from core WordPress development. The Role of CSS in WordPress (and My Role)īefore we dive in, a quick format note.

We’ll cover the basics, and also link you to a few very useful resources and CSS Grid tutorials to get you started. In this article, we cover what CSS Grid is, how it’s different from existing CSS systems, and why you should learn it. While I’m hardly a CSS expert, that’s specifically why I feel well-qualified to tell you to learn CSS grid: if this non-expert can find it great and useful, surely it has arrived as a technology you must know. CSS Grid is a very cool technology, and one I think more and more WordPress developers should both know about and use.

Responsive Grid Layout wordpress