![]() That’s important because on a page the source order is used for things like speech and tab navigation, so CSS Grids allow you to optimize the markup for accessibility without compromising your ability to manipulate the visual result. One aspect of it is that the visual order of elements on the page is decoupled from the order of elements in the markup. When you think of it, that’s a really interesting property. This means that apart from the parent HTML element the grid is applied to, there’s no need to define any extra elements for the columns, rows, cells, or areas. Indeed, the grid itself is completely defined in pure CSS. One key advantage of CSS grids is that they enforce real separation of layout and markup. Now that we know these simple definitions, let’s take a look at what makes grids so powerful. In the above grid, we could for example define areas A, B and C as shown below: Areas: An area is a rectangular shape that can span an arbitrary number of cells.In the figure above, only one cell has been highlighted, but there are 6 cells in the grid. Cells: A cell is where a horizontal and a vertical track meet.Lines are useful to indicate where content starts and stops, but tracks are ultimately where content goes. So in the above example, there are 3 vertical tracks and 2 horizontal tracks. ![]() Tracks: A track is simply the space between 2 parallel lines.Lines can optionally be given names, which helps with referencing them in CSS, as we’ll see later. Vertical lines are shown from left to right, but this depends on the writing direction. Lines: In this case there are 4 vertical lines and 3 horizontal lines.The figure above shows the building blocks of a grid: So it looks like a table in a way, except for a few key differences we’ll see later. So what’s a CSS grid layout?Īt its core, a grid layout in CSS is a set of vertical and horizontal lines that define cells into which content can be arbitrarily positioned. (And I strongly encourage you to do so!) You probably should not use the polyfill in production, however. They’ll be updating their implementation soon.įirefox has started implementing it too, so it shouldn’t be too long before you can use it in this browser.įinally, a polyfill exists, so you have no excuses not to start experimenting. Internet Explorer had the first implementation of CSS Grid (dating back to IE10), but the spec has evolved since it was added and so it’s not entirely compatible with the latest spec anymore. The Chrome implementation is currently the most up-to-date with the recent changes to the CSS Grid Layout specification. Turn the experimental Web Platform features flag on to get it to work. It’s a bit too early to use it on a commercial website.Ĭhrome has implemented the specification far enough to play with Grid. Yes you can start using it today, to experiment and learn. So it’s about time CSS got some proper layout solutions to support today’s use cases. People have been very creative at getting around the lack of support by using floats or absolute positioning and a variety of CSS layout frameworks emerged. Although this may not have been a problem when CSS first came out, it has evolved to be a pretty common one over the years, as all sorts of complex layouts couldn’t be easily implemented. These properties are defined in the CSS Grid Layout specification.ĬSS hasn’t particularly been known for its ability to handle complex layouts. So what has CSS got to do with it?ĬSS is getting a set of entirely new properties that, when used together, allow you to define grids for your web content to go onto. A grid, even if not visible, provides the viewer with a way to navigate content visually. The goal of a grid is to serve as a base for placing the various pieces of content and to make sure these pieces are aligned and spaced out evenly. In essence, a grid is a set of invisible vertical and horizontal lines that are used to position the various design and content pieces of a web page, magazine, or newspaper. I am not a designer nor did I know much about grid theory before stumbling upon the CSS Grid Layout specification, so don’t take my word for it and go look it up yourself, but if you don’t care to, here’s my pitch: My really short introduction to grid theory In this article we’ll take a look at the wonderful world of the CSS Grid Layout, a relatively new W3C specification that has partially started to see the day in some browsers.īut before we dive into what this new CSS technique is all about and how to use it, let’s quickly review grid theory.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |