If you’re a front end developer, designing a website or a UI will most likely take you a lot of time. Chances that you’ve been using a variety of CSS procedures are pretty high (flexbox above all) but, sometimes, you will definitely stick yourself in a loop of questions and Stack Overflow browsing. In this article, we’re going to discuss the power of CSS grid for your templates design and, most importantly, how to make them responsible for different devices.
What Is CSS Grid?
CSS grid is the latest CSS technology which lets you divide your page into rows and columns which automatically (generally) react to a resize of your screen. The usage of CSS grid is relatively simple to understand: once you set up your div, your body or your entire HTML document into rows and columns by using grid-template-rows/grid-template-columns, you will be asked to declare the length and width of those rows columns. This could be done by using relative units, percentages or pixels, but I highly recommend using fraction units (fr) to create a grid which is responsive for mobile and other screens.
What's The Difference With Flexbox?
Flexbox operates in two dimensions: horizontal and vertical. Therefore, you are only able to fit elements within divs which are included within the x or y line. CSS grid operates, instead, on three dimensions: horizontal, vertical and with width and length. The usage of CSS grid for templates set up is great to design complicated themes (i.e. the ones who use sidebars and other forms of navigations) because it reduces the number of lines of CSS used. CSS grid is, in fact, 70% thinner than flexbox and normal CSS layout, just so you can focus on other sides of your website.
Using Grid Vs Using Media Queries: What's The Difference?
Using media queries is still largely used within front-end development. Being relatively safe and easy to set up (you basically only have to declare properties for certain screen sizes) media queries have been a staple in “CSS boilerplates” through recent times but, in all fairness, Grid does the exact same thing and, if well planned, also adds great features when it comes to mobile responsiveness. If you create a grid template like the one mentioned above, when collapsing the screen, reducing its height and width, you will see how the sidebar will automatically resize itself on top (or bottom, depending on the order of your divs) of “content”. Media queries, of course, must be used on top of individual CSS declarations and, therefore, Grid confirms itself again as the top, most responsive, quickest CSS layout procedure out there.
How To Grid A Template: A Practical Guide.
As said above, it all starts with declaring the property you are targeting (i.e. body, a specific div or the whole HTML document). Once that is done, you can declare the number of rows and columns with grid-template-rows/columns: auto/pixel/rem/fr or by using repeat (number of rows/columns) unit. Once that is done, you will be required to declare your working areas: if you declared 3 rows and 3 columns, for example, you could set up your grid as follows:
“header header header”
“sidebar content content”
“footer footer footer”;
This will create a grid which will follow the measurements of your unit. Pretty simple, isn’t it?
To Conclude
With just 4 lines of code, you could be able to create a responsive layout. Once your grid is set up, simply declare each div you want to include within grid-areas: header/sidebar/content/footer. This way, your HTML element will be associated with the grid area you’ve declared above. Start grid now!