123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="fluid-container">
<main id="main-doc">
 <div class="field-container">
  <div class="nav-div"> <nav id="navbar"><header>CSS Grid Tutorial</header>
     <ul id="nav-bar">
       <li><a class="nav-link" href="#css_grid" target="_self">CSS Grid</a></li><br>
       <li><a class="nav-link" href="#what_is_grid_layout?" target="_self">What is grid layout?</a></li><br>
       <li><a class="nav-link" href="#creating_your_grid_in_css" target="_self">Creating your grid in CSS</a></li><br>
       <li><a class="nav-link" href="#defining_a_grid" target="_self">Defining a grid</a></li><br>
       <li><a class="nav-link" href="#flexible_grids_with_the_fr_unit" target="_self">Flexible grids with the fr unit</a></li><br>
       <li><a class="nav-link" href="#gaps_between_tracks" target="_self">Gaps between tracks</a></li><br>
       <li><a class="nav-link" href="#repeating_track_listings" target="_self">Repeating track listings</a></li><br>
       <li><a class="nav-link" href="#the_implicit_and_explicit_grid" target="_self">The implicit and explicit grid</a></li><br>
       <li><a class="nav-link" href="#the_minmax()_function" target="_self">The minmax() function</a></li><br>
       <li><a class="nav-link" href="#as_many_columns_as_will_fit" target="_self">As many columns as will fit</a></li><br>
       <li><a class="nav-link" href="#line-based_placement" target="_self">Line-based placement</a></li><br>
       <li><a class="nav-link" href="#positioning_with_grid-template-areas" target="_self">Positioning with grid-template-areas</a></li><br>
       <li><a class="nav-link" href="#a_css_grid,_grid_framework" target="_self">A CSS Grid, grid framework</a></li><br>
       <li><a class="nav-link" href="#summary" target="_self">Summary</a></li>
    </ul></nav></div>
   
   <section class="main-section" id="css_grid">
    <header >CSS Grid</header>
    <p>CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started
      with page layout.</p>
    <ul>
      A grid will typically contain-
      <li>Columns</li>
      <li>Rows</li>
      <li>gutters</li>
    </ul>
  </section>
  <section class="main-section" id="what_is_grid_layout?">
    <header >What is grid layout?</header>
    <p>A grid is simply a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. They help us to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites.
<br><br>
A grid will typically have columns, rows, and then gaps between each row and column — commonly referred to as gutters.</p>
   </section>
   <section class="main-section" id="creating_your_grid_in_css"><header >Creating your grid in CSS</header><p>Having decided on the grid that your design needs, you can use CSS Grid Layout to create that grid in CSS and place items onto it. We will look at the basic features of Grid Layout first and then explore how to create a simple grid system for your project.</p></section>
   <section class="main-section" id="defining_a_grid"><header >Defining a grid</header><p>To define a grid we use the grid value of the display property. As with Flexbox, this switches on Grid Layout, and all of the direct children of the container become grid items. Add this to the CSS inside your file:</p><br><div class="code"><code>.container{<br>
     display: grid;<br>
     }</code></div><p>Unlike flexbox, the items will not immediately look any different. Declaring display: grid gives you a one column grid, so your items will continue to display one below the other as they do in normal flow.
<br><br>
To see something that looks more grid-like, we will need to add some columns to the grid. Let's add three 200-pixel columns here. You can use any length unit, or percentages to create these column tracks.</p>
     <br>
     <div class="code">
     <code>.container{<br>
       display: grid;<br>
       grid-template-columns:200px 200px 200px;<br>
       }</code></div>
     <p>Add the 2nd declaration to your CSS rule, then reload the page, and you should see that the items have rearranged themselves one into each cell of the created grid.

     </p>
   </section>
  <section class="main-section" id="flexible_grids_with_the_fr_unit"><header >Flexible grids with the fr unit</header><p>In addition to creating grids using lengths and percentages, we can use the fr unit to flexibly size grid rows and columns. This unit represents one fraction of the available space in the grid container.
<br><br>
Change your track listing to the following definition, creating three 1fr tracks.

</p>
  <div class="code">  <code>.container {<br>
    display: grid;<br>
    grid-template-columns: 1fr 1fr 1fr;<br>
    }</code></div>
    <p>You should now see that you have flexible tracks. The fr unit distributes space in proportion, therefore you can give different positive values to your tracks, for example if you change the definition like so:</p><div class="code"><code>.container {<br>
    display: grid;<br>
    grid-template-columns: 2fr 1fr 1fr;<br>
    }</code></div><p>The first track now gets 2fr of the available space and the other two tracks get 1fr, making the first track larger. You can mix fr units and fixed length tracks — in such a case the space needed for the fixed tracks is taken away before the space is distributed to the other tracks.</p>
   </section>
   <section class="main-section" id="gaps_between_tracks"><header>Gaps between tracks</header><p>To create gaps between tracks we use the properties grid-column-gap for gaps between columns, grid-row-gap for gaps between rows, and grid-gap to set both at once.</p><div class="code"><code>.container {<br>
    display: grid;<br>
    grid-template-columns: 2fr 1fr 1fr;<br>
    grid-gap: 20px;<br>
     }</code></div><p>These gaps can be any length unit or a percentage, but not an fr unit.

</p></section>
   
   
   <section class="main-section" id="repeating_track_listings"><header>Repeating track listings</header><p>You can repeat all, or a section of, your track listing using repeat notation. Change your track listing to the following:</p><div class="code"><code>.container {<br>
    display: grid;<br>
    grid-template-columns: repeat(3, 1fr);<br>
    grid-gap: 20px;<br>
}</code></div><p>You will now get 3 1fr tracks just as before. The first value passed to the repeat function is how many times you want the listing to repeat, while the second value is a track listing, which may be one or more tracks that you want to repeat.</p></section>
   <section class="main-section" id="the_implicit_and_explicit_grid"><header>The implicit and explicit grid
</header><p>We have only specified column tracks so far, and yet rows are being created to hold our content. This is an example of the explicit versus the implicit grid. The explicit grid is the one that you create using grid-template-columns or grid-template-rows. The implicit grid is created when content is placed outside of that grid — such as into our rows. The explicit and implicit grids are analagous to the main and cross flexbox axes.
<br><br>
By default, tracks created in the implicit grid are auto sized, which in general means that they are large enough to fit their content. If you wish to give the tracks the browser creates a size you can use the grid-auto-rows and grid-auto-columns properties. If you add grid-auto-rows with a value of 100px to your CSS, you will see that those created rows are now 100 pixels tall.</p><div class="code"><code>.container {<br>
  display: grid;<br>
  grid-template-columns: repeat(3, 1fr);<br>
  grid-auto-rows: 100px;<br>
  grid-gap: 20px;<br>
     }</code></div></section>
   <section class="main-section" id="the_minmax()_function"><header>The minmax() function
     </header><p>Our 100-pixel tall tracks won’t be very useful if we add content into those tracks that is taller than 100 pixels, in which case it would cause an overflow. It might be better to have tracks that are at least 100 pixels tall and can still expand if more content gets into them. A fairly basic fact about the web is that you never really know how tall something is going to be; additional content or larger font sizes can cause problems with designs that attempt to be pixel perfect in every dimension.
<br><br>
The minmax function lets us set a minimum and maximum size for a track, for example minmax(100px, auto). The minimum size is 100 pixels, but the maximum is auto, which will expand to fit the content. Try changing grid-auto-rows to use a minmax value:

</p>
     <div class="code"><code>.container {<br>
    display: grid;<br>
    grid-template-columns: repeat(3, 1fr);<br>
    grid-auto-rows: minmax(100px, auto);<br>
    grid-gap: 20px;<br>
}
       </code></div><p>If you add extra content you will see that the track expands to allow it to fit. Note that the expansion happens right along the row.</p>
   </section>
   <section class="main-section" id="as_many_columns_as_will_fit"><header>As many columns as will fit</header><p>We can combine some of the things we have learned about track listing, repeat notation and minmax() to create a useful pattern. Sometimes it is helpful to be able to ask grid to create as many columns as will fit into the container. We do this by setting the value of grid-template-columns using repeat() notation, but instead of passing in a number, pass in the keyword auto-fill. For the second parameter of the function we use minmax(), with a minimum value equal to the minimum track size that we would like to have, and a maximum of 1fr.
<br><br>
     Try this in your file now, using the below CSS:</p><div class="code"><code>.container {<br>
  display: grid;<br>
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));<br>
  grid-auto-rows: minmax(100px, auto);<br>
  grid-gap: 20px;<br>
     }</code></div><p>This works because grid is creating as many 200 pixel columns as will fit into the container, then sharing whatever space is leftover between all of the columns — the maximum is 1fr which, as we already know, distributes space evenly between tracks.</p></section>
   <section class="main-section" id="line-based_placement"><header>Line-based placement</header><p>We now move on from creating a grid, to placing things on the grid. Our grid always has lines, these lines start at 1 and relate to the Writing Mode of the document. Therefore in English, column line 1 is on the left hand side of the grid and row line 1 at the top. In Arabic column line 1 would be on the righthand side, as Arabic is written right to left.<br><br>

We can place things according to these lines by specifying the start and end line. We do this using the following properties:</p>
     <ul>
       <li>grid-column-start</li>
       <li>grid-column-end</li>
       <li>grid-row-start</li>
       <li>grid-row-end</li>
     </ul>
     <p>These properties can all have a line number as the value. You can also use the shorthand properties:</p>
     <ul>
       <li>grid-column</li>
       <li>grid-row</li>
     </ul>
     <p>These let you specify the start and end lines at once, separated by a / — a forward slash character.<br><br>

       <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html" target="_blank">Download this file as a starting point</a> or <a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html" target="_blank">see it live here</a>. It has a grid defined already, and a simple article outlined. You can see that auto-placement is placing items one into each cell of the grid that we have created.<br><br>

We will instead place all of the elements for our site on the grid, using the grid lines. Add the following rules to the bottom of your CSS:</p><div class="code"><code>header {<br>
  grid-column: 1 / 3;<br>
  grid-row: 1;<br>
}<br>
<br>
article {<br>
  grid-column: 2;<br>
  grid-row: 2;<br>
}<br>
<br>
aside {<br>
  grid-column: 1;<br>
  grid-row: 2;<br>
}<br>
<br>
footer {<br>
  grid-column: 1 / 3;<br>
  grid-row: 3;<br>
}</code></div>
   </section>
   <section class="main-section" id="positioning_with_grid-template-areas"><header>Positioning with grid-template-areas
     </header><p>An alternative way to place items on your grid is to use the grid-template-areas property and giving the various elements of your design a name.
<br><br>
Remove the line-based positioning from the last example (or re-download the file to have a fresh starting point), and add the following CSS.</p><div class="code"><code>.container {<br>
  display: grid;<br>
  grid-template-areas: <br>
      "header header"<br>
      "sidebar content"<br>
      "footer footer";<br>
  grid-template-columns: 1fr 3fr;<br>
  grid-gap: 20px;<br>
}<br>
<br>
header {<br>
  grid-area: header;<br>
}<br>
<br>
article {<br>
  grid-area: content;<br>
}<br>
<br>
aside {<br>
  grid-area: sidebar;<br>
}<br>
<br>
footer {<br>
  grid-area: footer;<br>
     }</code></div><p>Reload the page and you will see that your items have been placed just as before without us needing to use any line numbers!</p><br><p>The rules for grid-template-areas are as follows:</p>
     <ul>
       <li>You need to have every cell of the grid filled.</li>
       <li>To span across two cells, repeat the name.</li>
       <li>To leave a cell empty, use a . (period).</li>
       <li>Areas must be rectangular — you can’t have an L-shaped area for example.</li>
       <li>Areas can't be repeated in different locations.
</li>
     </ul>
     <p>You can play around with our layout, changing the footer to only sit underneath the content and the sidebar to span all the way down for example. This is a very nice way to describe a layout as it is obvious from the CSS exactly what is happening.

</p>
   </section>
   <section class="main-section" id="a_css_grid,_grid_framework"><header>A CSS Grid, grid framework
     </header><p>Grid "frameworks" tend to be based around 12 or 16 column grids and with CSS Grid, you don’t need any third party tool to give you such a framework — it's already there in the spec.
<br><br>
     <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html" target="_blank">Download the starting point file</a>. This contains a container with a 12 column grid defined, and the same markup as we used in the previous two examples. We can now use line-based placement to place our content on the 12 column grid.</p><div class="code"><code>header {<br>
  grid-column: 1 / 13;<br>
  grid-row: 1;<br>
}<br>
<br>
article {<br>
  grid-column: 4 / 13;<br>
  grid-row: 2;<br>
}<br>
<br>
aside {<br>
  grid-column: 1 / 4;<br>
  grid-row: 2;<br>
}<br>
<br>
footer {<br>
  grid-column: 1 / 13;<br>
  grid-row: 3;<br>
}</code></div></section>
   <section class="main-section" id="summary"><header>Summary</header><p>In this overview we have toured the main features of CSS Grid Layout. You should be able to start using it in your designs. To dig further into the specification, read our guides to Grid Layout, which can be found below.

</p></section>
  </div>
  </main>
  
</div>
            
          
!
            
              @media max-width(480px) {
  .nav-div{position:static;
  height:auto;}
  #main-doc{
    margin-top:100px;
  }
}
main{
  text-align:center;
  grid-area:main; padding-bottom:50px;
}
header{
  font-size:22px;
}
.fluid-container{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows: minmax(100px, auto);
  grid-gap:25px;
}
.field-container{
  display:grid;
}
#main-doc{
  grid-column:2/3;
}
.nav-div{   left:0;
  position:fixed;
  font-size:22px;
  border:solid;
  margin-left:10px;
  height:80%;
}
a{
  color:black;
}
#nav-bar{
  list-style:none;
  text-align:left;
}
ul{
  list-style-position:inside;
}
section{
  border:solid;
}
.code{
 border:solid;
  padding:10px;
    background-color:grey;
  font-weight:bold;
  font-size:18px;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console