Introduction to CSS Grid Layout

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="CSS Grid introduction, what is, CSS 3, examples, free tutorial, tutorials, learn, codes, code, ccs"> <meta name="Description" content="CSS Grid Layout allows you to create complex website layouts within seconds."> <link rel="canonical" href="https://www.quackit.com/css/grid/tutorial/css_grid_introduction.cfm"> <title>Introduction to CSS Grid Layout</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">Introduction to CSS Grid Layout</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <ul class="pager"> <li><a href="/css/grid/tutorial/"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Tutorial Start</a></li> <li><a href="/css/grid/tutorial/create_a_grid.cfm">Create a Grid <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> <p class="lead">CSS <dfn>grid layout</dfn> is a new layout model optimized for two-dimensional layouts. It's ideal for website layouts, forms, image galleries, and anything that requires precise and responsive positioning.</p> <p>CSS includes many properties that can help with a website's layout. But until early 2017, there was no mechanism in CSS for creating two-dimensional website layouts. But all that has changed with the introduction of CSS grid layout.</p> <p>The CSS Grid Layout Module was developed by the CSS Working Group to provide a better way to create website layouts in CSS. It became a Candidate Recommendation in February 2017, and major browsers started to support grid layout in March 2017.</p> <p>With CSS grid layout (or just "CSS grid"), creating advanced, (and responsive) layouts is now extremely straightforward. CSS grid will almost certainly change the way we develop websites. </p> <h2>Why CSS Grid?</h2> <figure> <img class="img-responsive" src="/pix/stock/css_grid_introduction.png" alt="History of web layout"> <figcaption> Web design has evolved from using HTML tables for layouts, to CSS floated elements, and now finally to CSS grid layout. </figcaption> </figure> <p>As the web evolved over the years, building website layouts became more and more challenging. In the early days of the web, HTML tables were often used for multi-column layouts, forms, etc. But this method had its issues. It meant that the presentation had to be done at the markup level, so there was no separation between presentation and content. Tables were designed to hold tabular data, not for doing layouts. And apart from causing semantical issues, table layouts are not suited to responsive design.</p> <p>Floated elements eventually replaced table layouts as the commonly accepted and recommended layout method, as it allows us to position elements independently of the markup. However, while this method was a vast improvement from the table based layouts, it also had its limitations. Floats were mainly designed for document layout, and they weren't necessarily ideal for the more complex, application layout that is so prevalent on the web today. Floated elements can be difficult to control, especially when viewed on different sized devices and viewports. This resulted in various grid-like "hacks" becoming the norm, most of which required extra markup, which detracts from the whole concept of content separation. And so the CSS Working Group sought a better solution. </p> <p>The CSS grid layout model addresses these issues and more. It allows you to create advanced layouts in a fraction of the time it would take to do it with floated elements, and with less code.</p> <p>While it's true that the introduction of flexbox had already allowed developers to start moving away from floated elements, flexbox only works in one-dimension. Grid works in two-dimensions, so it is much better suited for creating complex layouts.</p> <h2>How Grid Works</h2> <p>Grid layout works on a grid system. The <dfn>grid</dfn> is an intersecting set of horizontal and vertical lines which create a sizing and positioning coordinate system for the grid container's contents. </p> <p>To create a grid, you simply set an element to <code>display: grid</code>. This automatically makes all of that element's direct descendents <dfn>grid items</dfn>. You can now use the various grid properties to adjust their size and positioning as required. Usually the first step is to define how many rows and columns the grid has (but even that's optional — as you'll see later).</p> <figure> <img class="img-responsive" src="/pix/stock/css_grid_4_rows_3_columns.gif" alt="Sample grid"> <figcaption> A grid with 4 rows and 3 columns. </figcaption> </figure> <p>This is an example of a grid with four rows and three columns. It contains 12 grid items. Each grid item is green, and there's a gutter in between them (the gutter defines the space between each grid item).</p> <p>These grid items are all the size of a single cell but they could be any size we wish. We could make them all different sizes if we wanted. Some could span multiple columns or rows, others could remain the size of a single cell. The rest of this tutorial demonstrates these and other grid features.</p> <ul class="pager"> <li><a href="/css/grid/tutorial/"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Tutorial Start</a></li> <li><a href="/css/grid/tutorial/create_a_grid.cfm">Create a Grid <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/css/grid/tutorial/">CSS Grid Tutorial</a></h3> <ul> <li><a href="/css/grid/tutorial/css_grid_introduction.cfm">Grid - Introduction</a></li> <li><a href="/css/grid/tutorial/create_a_grid.cfm">Grid - Create a Grid</a></li> <li><a href="/css/grid/tutorial/create_a_website_layout.cfm">Grid - Create a Website Layout</a></li> <li><a href="/css/grid/tutorial/create_a_responsive_grid.cfm">Grid - Create a Responsive Grid</a></li> <li><a href="/css/grid/tutorial/explicit_vs_implicit_grid.cfm">Grid - Explicit vs Implicit</a></li> <li><a href="/css/grid/tutorial/grid_item_placement.cfm">Grid - Grid Item Placement</a></li> <li><a href="/css/grid/tutorial/create_a_nested_grid.cfm">Grid - Create a Nested Grid</a></li> <li><a href="/css/grid/tutorial/form_layout_with_auto_placement.cfm">Grid - Form Layout with Auto-Placement</a></li> <li><a href="/css/grid/tutorial/css_grid_alignment.cfm">Grid - Alignment</a></li> <li><a href="/css/grid/tutorial/layering_grid_items.cfm">Grid - Layering Grid Items</a></li> <li><a href="/css/grid/tutorial/absolute_positioning_grid_items.cfm">Grid - Absolute Positioning</a></li> <li><a href="/css/grid/tutorial/inspect_a_grid.cfm">Grid - The Grid Inspector</a></li> </ul> </li> <li> <h3><a href="/css/grid/examples/">CSS Grid Examples</a></h3> <ul> <li><a href="/css/grid/examples/css_grid_photo_gallery_examples.cfm">Grid - Photo Gallery Examples</a></li> <li><a href="/css/grid/examples/css_grid_card_examples.cfm">Grid - Card Examples</a></li> <li><a href="/css/grid/examples/css_grid_form_examples.cfm">Grid - Form Layout Examples</a></li> <li><a href="/css/grid/examples/css_grid_website_layout_examples.cfm">Grid - Website Layout Examples</a></li> <li><a href="/css/grid/examples/css_12_column_grid_examples.cfm">Grid - 12 Column Grid Examples</a></li> </ul> </li> <li> <h3><a href="/css/reference/">CSS Reference</a></h3> <ul> <li><a href="/css/examples/" title="Copy & paste code examples.">CSS Examples</a></li> <li><a href="/css/properties/" title="All CSS properties listed alphabetically.">CSS Properties</a></li> <li><a href="/css/functions/" title="All CSS functions listed alphabetically.">CSS Functions</a></li> <li><a href="/css/data_types/" title="">CSS Data Types</a></li> <li><a href="/css/at-rules/" title="">CSS @-Rules</a></li> <li><a href="/css/selectors/" title="All CSS selectors.">CSS Selectors</a></li> <li><a href="/css/css3/animations/animatable_properties/" title="Properties that support CSS animations.">CSS Animatable Properties</a></li> <li><a href="/css/color/" title="Full CSS color reference, includes color picker, charts, generators, and more.">CSS Color</a></li> <li><a href="/css/css_color_codes.cfm" title="">CSS Color Codes</a></li> <li><a href="/css/tutorial/" title="">CSS Tutorial</a></li> <li><a href="/css/flexbox/tutorial/" title="">Flexbox Tutorial</a></li> <li><a href="/css/grid/tutorial/" title="">Grid Tutorial</a></li> <li><a href="/css/css_media_types.cfm" title="Use CSS to apply a separate style depending on the media type that is displaying your web page">CSS Media Types</a></li> <li><a href="/css/css_media_features.cfm" title="Use CSS to apply a separate style depending on the media features available in the output device">CSS Media Features</a></li> <li><a href="/bootstrap/tutorial/" title="Bootstrap is a free and open-source framework for creating websites and web applications.">Bootstrap Tutorial</a></li> <li><a href="/sass/tutorial/" title="Sass is a CSS preprocessor to help create maintainable style sheets.">Sass Tutorial</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

Introduction to CSS Grid Layout