cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <div class="cont">
  <h1>Grid Alignment</h1>
  
  <p>Aligning the grid in a case where the number of tracks do not equal the size of the container.</p>

  <h2>Initial values:</h2>
  <ul>
    <li>align-content: start</li>
    <li>justify-content: start</li>
  </ul>

  <p>The white area below is our grid container. It is 800x800 pixels. Our four column and four row track grid is in total 630x630 pixels including the gaps.</p>
  <p>By default it appears top left of the container.</p>
</div>
<div class="code">
  <div class="wrapper">
    <div class="item1">One</div>
    <div class="item2">Two</div>
    <div class="item3">Three</div>
    <div class="item4">Four</div>
  </div>
</div>

<div class="cont">
  <h2>Changing alignment of the grid</h2>
  <p>Chaning the values of align-content and justify-content to end we can move it to bottom right.</p>
</div>
<div class="code">
  <div class="wrapper example1">
    <div class="item1">One</div>
    <div class="item2">Two</div>
    <div class="item3">Three</div>
    <div class="item4">Four</div>
  </div>
</div>

<div class="cont">
  <h2>space-between and space-around</h2>
  <p>We can use the keyword values space-between or space-around. These will increase the gaps between items.</p>
</div>
<div class="code">
  <div class="wrapper example2">
    <div class="item1">One</div>
    <div class="item2">Two</div>
    <div class="item3">Three</div>
    <div class="item4">Four</div>
  </div>
</div>

<div class="cont">
  <h2>Centre the grid</h2>
  <p>The alignment properties make it easy to centre the grid.</p>
</div>
<div class="code">
  <div class="wrapper example3">
    <div class="item1">One</div>
    <div class="item2">Two</div>
    <div class="item3">Three</div>
    <div class="item4">Four</div>
  </div>
</div>


</div>
            
          
!
            
              

.wrapper {
  width: 800px;
  height: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 150px 150px 150px 150px;
  grid-gap: 10px;
  background-color: #fafafa;
}

.example1 {
  align-content: end;
  justify-content: end;
}

.example2 {
  align-content: space-around;
  justify-content: space-between;
}

.example3 {
  align-content: center;
  justify-content: center;
}

.item1 {
  grid-column: 1 / 5;
  grid-row: 1 / 3;
}

.item2 {
  grid-column: 1 / 4;
  grid-row: 3;
}

.item3 {
  grid-column: 4;
  grid-row: 3 / 5;
}

.item4 {
  grid-column: 1 / 4;
  grid-row: 4;
}

.wrapper div {
  padding: 10px;
  background-color: rgba(41,73,130,.5);
  color: #fff;
  border-radius: 5px;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font: 1em/1.4 Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #fafafa;
  color: #000;
  margin:0;
}

.cont {
  width: 800px;
  margin: 0 auto;
}

.code {
  background-color: #333;
  padding: 20px;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console