CSS Kenpai 🍻

The Holy Grail of CSS Layouts

A Simple Intro to CSS Grids

We started from tables , moved to floats, then some positioning and then flexbox . But , in all these methods for laying out our site , we didn't have something that could handle things in the 2-dimensions, rows and columns . The elements did not have any relationship with each other, as in they were not aware of each other's presence .

ENTER CSS GRID...

CSS Grid is the best solution for an all-responsive flawless layout with elements having a well defined relationship with each other . Other than just making responsive layouts , it can also solve some of the oldest problems in web design , such as vertical centering . Just a few bits of CSS and all elements centered perfectly as long as they are direct children of the grid container .

.grid-container{
   display: grid;
   height: 100%;
   width: 100%;
   place-items: center;
}

See how easy that was? You won't have to worry about googling how to center a div anymore :) .

What is CSS grid anyway? #

In simple words , CSS grid is a layout system in which elements are positioned into rows and columns , and each child has to be the direct descendent of the element on which the display property of grid will be applied, i.e: the grid container .
CSS Grid is amazing in every way and it is a much wanted addition into CSS . It was always in the minds of the creators of CSS , Dr. Bert Bos and HÃ¥kon Wium Lie , as they were highly inspired by the things magazines , books and newspapers were doing with layout . CSS Grid is a modern layout tool which gives us not only a great amount of power for making complex , scalable and maintainable websites , but also allows us to do more with less code .

Some important properties #

CSS grid has some properties you need to define in order to have a grid layout .
Before that let's understand the new units of measurement we will use in grid on a regular basis .

In the example below , we are making a grid of two rows and two columns of equal length .
First of all , we have to put all items in a grid container by setting display: grid on it .

.grid-container{
  display: grid;
}

Now all elements have to be children of this container . In order to define how columns and rows scale and have different sizes , we have properties called grid-template-columns and grid-template-rows . To have a layout of two columns of equal size, and two rows of equal size as well , we can define our grid like this :

See the Pen Grid demo by Rishav (@Rj456) on CodePen.

Article Layout #

I came across this technique by reading Kevin Pennecamp's article on modern CSS grid solutions . This site is using the same technique . You see all of these amazing sites who have their content centered nicely on big screens and small screens alike? ,that can be done by media queries, some margins and padding , but it is not an intuitive solution. With CSS Grid , it's easy . Just have two empty grid columns on either side of your content and have min and max width values for all of the columns so that they scale nicely .

main {
  display: grid;
  grid-template-columns:
  minmax(2rem, 1fr)
  minmax(auto, 65ch)
  minmax(2rem, 1fr);
}
/* Center all children */
main > * {
  grid-column: 2;
}

Applying minmax() gives us a minimum and maximum value for the columns . You can see that we have min size of 2rem and max size of 1fr for the columns on the side , and min size of auto and max size of 65ch which will ensure that the main content is not more than 65 characters , and it it's less than 65 then auto will take care of that .
We used grid-column: 2 which means that all content in main will start from column line 2 .

Article Layout

This is only one example of how CSS Grid can make responsive layouts . For more insight on this , visit this amazing website by Una Kravets .

What can you animate? #

You can animate the grid-gap property to make amazing things like this :

Article Layout

Firefox nightly supports animating grid-template-columns and grid-template-rows . Michelle Barker did a experiment on her website about this , go check it out!

Support #

It's awesome !

Summary #

To summarize , you can do a lot with CSS Grid once you start ! This was just an introductory article to open the doors of CSS grid for you .
Some articles that will help you learning further

Thanks for reading ! If this helps you in any way , you can always comment on twitter ;)