(Photo by from ) Hilary Susan Osman Pexels Look at this picture and imagine that was the web page layout your client asked for; and of course, it has to be responsive. Would you like to have a simple way to describe that structure, but at the same time have the flexibility to adapt to any resolution? Keep reading. The inspiration While (re)learning CSS, specifically CSS layouts, I came to a topic I haven’t heard before: . And while checking all the material available, I was referred by a friend to this video of a conference given by where he said, around 43:40, something that would resonate later in my head: “Y .” CSS Grids Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts) ou in this room can build a new better framework based on CSS grid Later on, in my journey learning CSS, I came to a project where I was supposed to build a grid framework mimicking the behavior of Bootstrap. Here’s when those words came back to my head and I decided I would make one of the unwritten objectives of this framework to give the user a simpler and nicer way to deal with grids using HTML & CSS. The model So, my next step was to come up with a way of accomplishing this. As usual, easier said than done but, as always, the best way to get there is by taking baby steps. I decided to try first to use the same notation and behavior as Bootstrap, so I build a piece of simple SASS code to create the classes to achieve this. Very early I learned that, instead of using the Bootstrap notation of it would be easier and more natural for a CSS grid to use an extended version like because that’s exactly how grid columns work, and this had the advantage (compared to Bootstrap) that I would have to create neither an nor an because that would be implicit in the notation. col-{media breakpoint}-{column number} col-{media breakpoint}-{start column number}-{end column number} offset class order class Instead of using: Leftmost four columns Rightmost four columns < = > div class "row" < = > div class "col-md-4" </ > div < = > div class "col-md-4 offset-md-4" </ > div </ > div I could just use: Leftmost four columns Rightmost four columns < = > div class "row" < = > div class "col-md-1-4" </ > div < = > div class "col-md-9-12" </ > div </ > div And if I wanted to swap the two div’s positions on different media breakpoints, I could simply use: Leftmost four columns Rightmost four columns < = > div class "row" < = > div class "col-md-1-4 col-lg-9-12" </ > div < = > div class "col-md-9-12 col-lg-1-4" </ > div </ > div Simple and elegant! (at least that’s what I tell myself) But having reached this point, as many times it happens to me (and I’m sure to many of you out there), while walking my dog an idea popped in my head: How about using an Excel-like notation to define, not a row, but the grid itself? I thought of this Excel-like notation because it’s very familiar to most people who have used Excel at some point in their lives (and that’s a lot of people) and it allows ranges to be expressed in a simple but powerful way. Take this example from : css-tricks.com, «A Complete Guide to Grid» The ranges can be expressed as: So the notation could be something like this: Header Main Sidebar Footer < = > div class "grid" < = > div class "range-md-A1-A4" </ > div < = > div class "range-md-B1-B2" </ > div < = > div class "range-md-B4-C4" </ > div < = > div class "range-md-C1-C3" </ > div </ > div And if you wanted, for example, to move the sidebar to the left on the large breakpoint you would use: Header Main Sidebar Footer < = > div class "grid" < = > div class "range-md-A1-A4 range-lg-A1-A4" </ > div < = > div class "range-md-B1-B2 range-lg-B3-B4" </ > div < = > div class "range-md-B4-C4 range-lg-B1-C1" </ > div < = > div class "range-md-C1-C3 range-lg-C2-C4" </ > div </ > div Using this notation you can have a simple yet very powerful grid framework! The design Now, before deciding the size of the grid that we will be supporting, let’s analyze the case of one row. If you had one row with 12 columns (like Bootstrap does) you would have: Sum of numbers from 1 to 12 inclusive That means we need 78 classes to describe a single row with 12 columns in the style . col-{media breakpoint}-{start column number}-{end column number} But when we increase the vertical dimension, this calculation turns a little bit more complex since we will omit duplicated references (the range is the same as ), but a simple table should suffice: a1-b2 b2-a1 Generated classes depending on Rows and Columns We can see how the number of classes increases dramatically with the addition of a row or a column above 4x4; but for practical purposes, a 4x4 table won’t be of much use. I decided to go for a grid for two reasons: 6x4 First, this gives me some nice equilibrium when dividing the columns (I can have symmetric columns with 1,2,3 and 6, and asymmetric with 4 and 5) and the rows (I can split vertically in half or fourths, keeping a header and footer zone). Second, these containers can be nested, so any of these cells can, in turn, behave like a grid, and in that way my design can grow indefinitely. The proof of concept shows the above layout with different media breakpoints like those used by Bootstrap. Open it in a separate window and try resizing the window to check out the behavior. This first demo reproduces the central panel of the stained glass layout shown at the start of this article (check below for the code). The second demo The code You can check the code for this basic framework, as for the demos in this GitHub link: https://github.com/oscarnava/Excel-style-grid In case you want to check the core of the framework, it's comprised in these lines of code: @ , , in { @ only screen and (min-width: ) { @ from 1 through length( ) { @ from 1 through { @ from through length( ) { @ from through { : nth( , ); : nth( , ); #{ }-#{ }#{ }#{ }#{ } { grid-column: #{ }/#{ + }; grid-row: #{ }/#{ + }; } } } } } } } each $name $dimension-min $dimension-max $MEDIA-BREAKPOINTS media $dimension-min for $top $ROWS for $left $COLS for $bottom $top $ROWS for $right $left $COLS $top-name $ROWS $top $bottom-name $ROWS $bottom .range- $name $top-name $left $bottom-name $right $left $right 1 $top $bottom 1 These five nested loops generate all the class definitions. And these are the global definitions that control the columns, rows, and media breakpoints rules generated: : ; : (A,B,C,D); : ( (sm, , ), (md, , ), (lg, , ), (xl, , ), ); $COLS 6 $ROWS $MEDIA-BREAKPOINTS 576px 767px 768px 991px 992px 1199px 1200px 99999px By changing these and recompiling the code you can generate any custom grid layout that fits your needs. Just remember to check the table above to make sure you don’t generate an excessive number of class definitions. The conclusion Although simple and immature, this sketch of a framework already shows its power. For example, to answer the theoretical question asked at the beginning of this article, the layout of the central panel of that window can be described with this code: < = > div class "excel-grid" < = > div class "grid" < = > div class "range-md-A1B1" </ > div < = > div class "range-md-A2A3" </ > div < = > div class "range-md-A4A5" </ > div < = > div class "range-md-A6A6" </ > div < = > div class "range-md-B2B2" </ > div < = > div class "range-md-B3B4" </ > div < = > div class "range-md-B5B5" </ > div < = > div class "range-md-B6B6" </ > div < = > div class "range-md-C1D1" </ > div < = > div class "range-md-C2D2" </ > div < = > div class "range-md-C3C4" </ > div < = > div class "range-md-D3D4" </ > div < = > div class "range-md-C5D5" </ > div < = > div class "range-md-C6D6" </ > div </ > div </ > div And this is the result: Considering most of the text is HTML, and the real essence of the layout is contained in the Excel-style class names, this is a nice approach. By the way, after creating the 14 inner div’s, it took me about 5 to 10 minutes to place each panel in its corresponding position in the window (and I’m a slow typist 😄). Also, using , the feedback is instantaneous. Brackets Live Preview
