CSS Grid Tutorial

<!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 tutorial, CSS 3, Cascading Style Sheets level 3, version, v3, properties, property, animation, transition, transform, webkit, moz, ms, opera, firefox, safari, chrome, internet explorer, Stylesheets, examples, free tutorial, tutorials, learn, codes, code, ccs"> <meta name="Description" content="Learn CSS grid and create complex website layouts within seconds."> <link rel="canonical" href="https://www.quackit.com/css/grid/tutorial/"> <title>CSS Grid Tutorial</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">CSS Grid Tutorial</h1> <div class="ad ad-top">  <div data-fuse="23059883638"></div> </div> <ul class="pager"> <li><a href="/css/grid/examples/"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Grid Examples</a></li> <li><a href="/css/grid/tutorial/css_grid_introduction.cfm">Start Tutorial <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> <p class="lead">Learn CSS grid and create complex website layouts within seconds!</p> <div class="index"> <div class="row"> <div class="cell col-2"> <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> </div> <div class="cell col-2"> <a href="/css/grid/tutorial/css_grid_introduction.cfm"><img class="img-responsive" src="/pix/stock/css_grid_placement_basic.png" alt="Example of a grid"></a> </div> </div> </div> <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>CSS Grid Layout will soon be an essential part of any frontend developer's toolbox. If you're a frontend developer, you will need to learn grid — it will almost certainly become a non-negotiable skill in any frontend development position.</p> <p>With its powerful features and intuitive syntax, grid layout will undoubtedly change the way layouts are done on the web.</p> <p><a href="/css/grid/tutorial/css_grid_introduction.cfm">Start this tutorial now</a> and find out what all the fuss is about.</p> <ul class="pager"> <li><a href="/css/grid/examples/"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Grid Examples</a></li> <li><a href="/css/grid/tutorial/css_grid_introduction.cfm">Start Tutorial <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="23059883641"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059511718"></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 - 2024 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

CSS Grid Tutorial