Introduction
This tool is meant for simple layouts and for more complicated highly responsive layouts. While using simple classes to just define the column width in general you can use specified widths for different screen sizes and orientations as well.
grid.css is an easy-to-use tool to make sure your layouts (based on twelve columns) can follow a clean line.
Besides easy layouts with a random number of columns per line you can define widths for columns on your own.
With orientation on the usage of flex-boxes alignment of columns and rows are mostly defined with flex-box arguments, but always with an eye on a natural understanding of rows and columns.
License
grid.css by Cornelia Schrepel (Yashia) is licensed under a Creative Commons Attribution-NoDerivatives 4.0 International License.
How to install grid.css?
Embed grid.css
Download the grid.css and put it in a folder of your project. Now you embed it in the head of your webpage like this:
Adjust screen sizes
There are 5 places in the grid.css where you can adjust supported screen sizes to fit your project. You will have to decide for 3 regular screen width ranges.
By default these are 1280px to 1919px (L), 720px to 1279px (M) and 360px to 719px (S).
XL is everything above the screen width range you expected as maximum for your project.
L is the largest screen width range you expect.
M is the medium screen width range.
S is the smallest screen width range. Usually it's more like a screen width if you put a mobile device in portrait mode.
XS is everything below the smallest screen width range you expected for your project.
Adjust your main CSS file
Your own CSS should contain this to make sure the grid is shown correctly.
That's all and you can use grid.css as described below.
How to use grid.css?
Please note that I will use some additional CSS* to force some containers to work on point for my examples. I will mark the examples and explain why and where I use additional CSS.
Simple layouts
Okay, first of all there's a simple structure of a container, rows and columns. As an example this is a grid with two rows and three columns with equal widths per row.
Nesting
You can also nest a layout by using row -> col -> row -> col and so on. And you don't have to necessary put another row-col-construct to use elements like for example text, img, spans as siblings of a nested row. Like this the text "row 1 - col 2" is written right above the nested row.
Column widths
It's clear that all equal columns are not always what you need in your page. So maybe you need more space in the middle, more space to the left or simply as least as much space on the right.
You can achieve a specific width of a column by referring to the 12-cols principle and set a column to a width from 1 to 12.
To auto-adjust a column you can use auto and it will usually just take up the space it needs. Whenever the other columns need more space, the auto column will reduce and text may wrap then.
You can simply adjust the width of columns by adding them a number between 1 and 12 and the remaining undefined columns will share the remaining space as you can see in the second row. You can mix column widths inside of a container as you need it.
Wrapping
It can happen that you need to have more columns in a row than would fit in there. But don't worry, the columns will wrap naturally. Undefined columns will be placed until one defined columns comes that wouldn't fit anymore.
If you want to prevent wrapping for some reason you can use "nowrap" on a row as seen in row 2. This can cause weird behaviour, but whenever it's wanted you can use it.
Simple alignment
Okay, let's try to align stuff. For this I will use some additional CSS* to force a fixed height of 5em on the columns. Otherwise I wouldn't be able to show the vertical alignment.
Advanced alignment
There are additional classes to use alignments of flex-boxes such as around and between, which can be useful.
The example shows the behaviour of auto-cols leaving too much space in the row.
While in the first row this space is left as one piece the second row uses the left space equally around every column and the third row uses the left space equally between the items.
Paddings
As you can may have seen, the text is not exactly on the left or right of a column. The reason is that columns do usually have a right and left padding to make sure that the content of two columns doesn't stick together but has a small gap between them. There are two variables in the root of the grid.css that define the size of this gap. If you ever want to have a bigger or smaller general gap, you can change these two values, but the second one should be half of the first one.
Whenever you need more or less padding, you will find some classes to achieve what you want. You can erase horizontal paddings with the class "nohorpad" or increase it with "morehorpad" and it will work for complete rows or just single columns.
Additional to this there are also two classes for vertical paddings. "withvertpad" and "morevertpad" can be used for rows and columns as well as you need it. The example will just show columns, but you can try it with rows as well.
If the standard paddings for the 3 additional classes ("morehorpad", "withvertpad" and "morevertpad") don't suit your project feel free to adjust at first the values in :root as seen above and after that go for the factors in the brackets and adjust them. Be aware that there are two rules for "morehorpad" - one for rows and one for columns and you need to find factors that will give the same result when used.
Merging columns
If you ever happen to not want any gap between the content of your columns there's an additional class "merge" you can give to the row to let the columns lose their gap. But be aware that this won't look good if the columns wrap for a reason. Make sure that the merged content will never be so wide that it wraps. You can also use "nowrap" as additional class to avoid wrapping.
Flexible Rows
Sometimes you will have a container with a fixed height and putting multiple rows may not fill the container or exceed it. It's helpful to be able to make one or more rows growing or shrinking in height to reduce awkward behaviour in fixed containers.
By simply adding "grow" to a row you will force the row to adjust her height and fill the container. For this examples I used additional CSS* to fix the height of the container to 7.5em.
By adding "shrink" to a row you will force the row to adjust her height too, but in a decreasing way. Remember to always put an overflow attribute to your shrinking row too, it's not set by default. For this examples I used additional CSS* to fix the height of the container and the regular column's height. Regular columns are 5em height while the container is fixed on 7.5em height. The overflow attribute for this shrinking row is hidden, but you can also use auto if you want it to have a scrollbar.
Orientations
Most projects do have a target audience which usually uses devices of a specific size and orientation and projects will be developed for this.
To make sure that even unusual orientations get served there are a some additional classes you can use. All "port" and "land" classes are for portrait and landscape orientations
The examples can be watched by changing the orientation in your browser. Simply turn your mobile device or resize the browser window on your desktop pc.
Note: While you can use the common column-width classes without "col" you will need to use col as main class and "port" and "land" just as additional classes.
Screen widths
As promised here comes the other part of responsive design. To show you the effect of different screen widths I recommend to start with the default max of 1920px screen width to watch this example and reduce the size to watch the columns grow and wrap.
Note: As with the "port" and "land" classes, you will need a main class "col".
Hide columns
For some screen widths and projects it will become necessary to hide some content to save some space on the website. For this there's the "none" class. You can use it either as standard like "col-none" to regular hide a column and just show it in a specific screen width or to hide columns for a specific screen width or orientation.
Auto columns
As far above mentioned you can set columns to auto-mode where it will just take the space it needs.
It not only works as "col-auto" for regular designs, but also for orientations and screen widths.
Note: You can set a column to "col-auto" without defining it with another "col" class, but for things like "land-auto" or "m-auto" you will need the "col" class.
Resetting columns
Whenever your project comes to a point where your defined columns-width don't fit a specific setup and you need to reset a column to its regular behaviour, you can achieve that by using the "-reg" suffix.
The "-reg" suffix works with "-[defined column width]", "-none" and "-auto".
Note: The suffix doesn't reset any alignments or paddings and it will not work together within the same setting (like class="m-none m-reg") since you can't have both at the same time.