While these techniques enable us to organize and control the layout of elements on a webpage, they are not always sustainable, as some lead to performance bottlenecks. For example:<\/p>\n\n\n\n
- Floats affect a web page’s SEO. <\/li>
- Table-based layouts lead to non-semantic markup on our sites, compromising accessibility<\/a>.<\/li>
- Positioning elements require using CSS hacks.<\/li><\/ul>\n\n\n\n
Enter CSS Grid.<\/p>\n\n\n\n
CSS Grid is a layout system\u2014a method of organizing elements on a webpage\u2014used for building two-dimensional layouts. It is a structure made up of intersecting horizontal and vertical lines known as grid lines that divide the layout of an HTML element into rows and columns.<\/p>\n\n\n\n
CSS Grid is a powerful tool that enables web developers to define the position of HTML elements and control how the elements would span horizontally and vertically across the page\u2014a feat that cannot be achieved using other layout systems.<\/p>\n\n\n\n
This article is a comprehensive guide for everything you need to know about the CSS Grid layout system. <\/p>\n\n\n\n
In this article, we’ll go over:<\/p>\n\n\n\n
- The CSS Grid vocabulary<\/a><\/li>
- How to make a basic grid<\/a><\/li>
- Inserting gutters between grid elements<\/a><\/li>
- Aligning grid items horizontally <\/a><\/li>
- Aligning grid items vertically <\/a><\/li>
- Measurement units introduced with the CSS Grid layout<\/a><\/li>
- Useful CSS functions you should utilize when working with CSS Grid<\/a><\/li>
- Expanding grid items across multiple grid lines<\/a><\/li>
- Syntax to shorten the amount of CSS you need to type<\/a><\/li><\/ul>\n\n\n\n
The CSS Grid vocabulary<\/h2>\n\n\n\n
CSS Grid introduces a few new concepts you should familiarize yourself with before diving into its usage.<\/p>\n\n\n\n
Grid container:<\/strong> The HTML element on which the grid layout is applied.<\/p>\n\n\n
\n![\"\"](\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_6323267e8ec66-1024x518.png\")
A grid container is what holds the grid itself. If the grid constructs a box, then the container makes up the corners of the box.<\/figcaption><\/figure>\n<\/div>\n\n\n Grid item(s)<\/strong>: All direct child elements of the grid container.<\/p>\n\n\n\n
Grid line:<\/strong> These are the horizontal and vertical dividing lines that make up the structure of the grid. These lines reside on either side of a column (column grid lines) or row (row grid lines). Hence, a grid with four columns will have five column lines, with one after the last column.<\/p>\n\n\n
\n![\"\"](\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_63232721e79d2-1024x638.png\")
Grid lines are the horizontal and vertical dividers (lines) that separate grid items into a grid<\/figcaption><\/figure>\n<\/div>\n\n\n Grid cell<\/strong>: The space between two column grid lines and two adjacent row grid lines, also known as grid tracks. It is a single unit of a grid and the smallest unit possible. By default, all grid items are laid out one item per grid cell.<\/p>\n\n\n
\n![\"\"](\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_6323275f80322-1024x638.png\")
A grid cell is the space between adjacent grid lines. Think of them as smaller boxes that construct the larger grid system.<\/figcaption><\/figure>\n<\/div>\n\n\n Grid track<\/strong>: The area between two adjacent grid lines. The gap between two grid row lines is a row track, and the gap between two grid column lines is a column track. The size of a grid track determines the width and height of our grid items.<\/p>\n\n\n
\n![\"\"](\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_632335f4c5c41-1024x638.png\")
A grid track is the area between two adjacent grid lines. Horizontal grid tracks are known as rows, and vertical grid tracks are known as columns.<\/figcaption><\/figure>\n<\/div>\n\n\n Grid area<\/strong>: A rectangular area on the grid made up of one or more grid cells. Grid areas are created when a grid item spans over one-to-many grid tracks. They must be rectangular; creating a T- or L-shaped grid area is impossible.<\/p>\n\n\n
\n![\"\"](\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/09\/img_632335f582f9f.png\")
A grid area is a rectangular area on the grid and can consist of something as small as one cell, or as big as the entire grid.<\/figcaption><\/figure>\n<\/div>\n\n\n Now, without further ado, let’s dive in!<\/p>\n\n\n\n
How to make a basic grid<\/h2>\n\n\n\n
To create a CSS Grid layout, you’ll first need to define a grid container. The grid container can be any individual parent element (for example, a div).<\/p>\n\n\n\n
To define a grid container, pass the
display<\/code> property<\/a> with either a value ofgrid<\/code> orinline-grid<\/code> to an element’s style block. Doing this will implicitly convert all direct child elements of the grid container into grid items.<\/p>\n\n\n.block-level-grid-container<\/span> {\ndisplay<\/span>: grid;\n}\n\n.inline-level-grid-container<\/span> {\ndisplay<\/span>: inline-grid;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nThe value
grid<\/code> makes the parent grid element act a bit like an un-styleddiv<\/code>, making it span the full width of a page by default due to them being block-level elements. In contrast, the valueinline-grid<\/code> behaves much like an un-styledspan<\/code>, making it act like an inline element to its siblings.<\/p>\n\n\n\nLet’s look at an example.<\/p>\n\n\n
<div<\/span> class<\/span>=\"container\"<\/span>><\/span>\n <div<\/span> class<\/span>=\"box a\"<\/span>><\/span>1<\/div<\/span>><\/span>\n <div<\/span> class<\/span>=\"box b\"<\/span>><\/span>2<\/div<\/span>><\/span>\n <div<\/span> class<\/span>=\"box c\"<\/span>><\/span>3<\/div<\/span>><\/span>\n <div<\/span> class<\/span>=\"box d\"<\/span>><\/span>4<\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nIn the code block above, we define a
div<\/code> with a class of\"container\"<\/code>. Within thediv<\/code> are four child elements.<\/p>\n\n\n\nWe can now set the
div<\/code> as a grid container.<\/p>\n\n\n.container<\/span> {\n display<\/span>: grid;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\nThe result:<\/p>\n\n\n
\nThe four elements are stacked on top of one-another vertically.<\/figcaption><\/figure>\n<\/div>\n\n\n Setting an element to a grid container alone will not immediately affect how the child elements are displayed, as we still haven’t specified how the layout should look. Hence, CSS lays out the grid items in a single-column grid.<\/p>\n\n\n\n
To change the layout of the grid items within a grid, we must explicitly define the rows and columns we want our grid to have. To do that, we’ll use the CSS properties
grid-template-columns<\/code> andgrid-template-rows<\/code>.<\/p>\n\n\n\nGrid Template Columns<\/h3>\n\n\n\n
The
grid-template-columns<\/code> property lets us specify the number of columns we want in a grid container and how wide each column should be.<\/p>\n\n\n\n - How to make a basic grid<\/a><\/li>
- Positioning elements require using CSS hacks.<\/li><\/ul>\n\n\n\n
![\"\"\/](\"https:\/\/lh3.googleusercontent.com\/VXoawWo3t8LEZsDACVXI_HmKLE5x1UKiQdtChppsVNQYgtJRU6hbVJdFGB9VhfSMMqAhJmBTVUunXFuAgmNBNnXIGU_mTfvfo4Xm2hSHSTQL3-bsYFriRTYOP9VqdoC_f78jaOLBSr1lnhMtb5Xc-3Zfq-PIsTtlLvTzg47qsN-c284P6NuOW44F1g\")
![\"\"\/](\"https:\/\/lh5.googleusercontent.com\/dClQ_R4I5McKW85BH8VES6zr2tB8joHTqPaIvmToNjW555FlvCAuQ5LL21AcIkfs4uf6ZAIOlP-GEcypDETpg_j0_XYVewjqOfQK0l0KZH6llcqzhn8K5McIqYBUNZd5tRCTLTTuHRIocrmrTMCLlLvwGidF3zx541DAPWvev8VMQw7lpP_SKUZYNg\")
![\"\"\/](\"https:\/\/lh6.googleusercontent.com\/EPr3CGbwI7jLx0GTsSCcq4T0vbUw9DK79I494Cg8S3mOiCGwpv-Ntrjarj9oiLVhn5LFbd1hNDbQRj2MY3_rWrqIJ8Iy_JXhoI4w5HW-ZpeijY9lN7s3sKa4bjtmAO07kat4eeMqAG2e3m7q1MFgIEZ6DNkzmI5YoXgt-JxkPZGTuOeZ1E1EGIs-sw\")
![\"\"\/](\"https:\/\/lh5.googleusercontent.com\/LaiRX48vHFbZY2SZp-tMBHWvrH4VP7A4sEqnW6GQp0Fy6cho8HTbcRuXFGIcmxM-1D0lsGd8uWSoDfX9lPzTW2HO7_uGzm9Qd_R2jbkajzpvQBTrsapoHa9D4TV3GOCPqwLFbqRQ3uZqnXU5ByRbtbXjRjFw-BkCXHcNaq_6xSgWjiCTEmzIGe_DAg\")
![\"\"\/](\"https:\/\/lh3.googleusercontent.com\/LOfsGHOGi7eF9JLSZbIqUgGLtjIpa1OTy2MiZaJCxRHxWfi3l4wn0F7rqgi3AYyRh5uHNi5x6HMqMTaIq12yIjz5_7ZcvOZBRMvBntqOr7qvukOlBIptuSuZ9BF57eoAJRnWRFWrgu1-Pv0_NLvAU7TrWlWOz3jgWdlH4euub5Oemw5rJree_ykJXg\")