CSS - Grid

Grid

<!-- index.html -->
<!-- Head starts -->
<style>
  .d1 {
    background-color: lightskyblue;
  }

  .d2 {
    background-color: lightsalmon;
  }

  .d3 {
    background-color: paleturquoise;
  }

  .d4 {
    background-color: lightpink;
  }

  .d5 {
    background-color: palegoldenrod;
  }

  .p5 {
    padding: 5px;
  }

  .container {
    font-size: 40px;
    font-family: monospace;
    width: 100%;
    padding: 5px;
    background-color: lightgrey;
    display: grid;
    /* Three columns */
    grid-template-columns: 1fr 1fr 1fr;
    /* Gap between columns */
    /* column-gap: 5px; */
    /* Two lines */
    grid-template-rows: 1fr 1fr;
    /* Gap between rows */
    /* row-gap: 5px; */
    /* Gap between rows and columns */
    gap: 5px 5px;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<div class="container">
  <div class="p5 d1">1</div>
  <div class="p5 d2">2</div>
  <div class="p5 d3">3</div>
  <div class="p5 d4">4</div>
  <div class="p5 d5">5</div>
</div>
<!-- Body ends -->

Coluna

<!-- index.html -->
<!-- Head starts -->
<style>
  .d1 {
    background-color: lightskyblue;
  }

  .d2 {
    background-color: lightsalmon;
  }

  .d3 {
    background-color: paleturquoise;
  }

  .d4 {
    background-color: lightpink;
  }

  .d5 {
    background-color: palegoldenrod;
    /* Item 5 occupies position 2 until 4 of the grid */
    grid-column: 2 / 4;
  }

  .p5 {
    padding: 5px;
  }

  .container {
    font-size: 40px;
    font-family: monospace;
    width: 100%;
    padding: 5px;
    background-color: lightgrey;
    display: grid;
    /* Three columns */
    grid-template-columns: 1fr 1fr 1fr;
    /* Gap between columns */
    /* column-gap: 5px; */
    /* Two lines */
    grid-template-rows: 1fr 1fr;
    /* Gap between rows */
    /* row-gap: 5px; */
    /* Gap between rows and columns */
    gap: 5px 5px;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<div class="container">
  <div class="p5 d1">1</div>
  <div class="p5 d2">2</div>
  <div class="p5 d3">3</div>
  <div class="p5 d4">4</div>
  <div class="p5 d5">5</div>
</div>
<!-- Body ends -->

Linha

<!-- index.html -->
<!-- Head starts -->
<style>
  .d1 {
    background-color: lightskyblue;
  }

  .d2 {
    background-color: lightsalmon;
  }

  .d3 {
    background-color: paleturquoise;
  }

  .d4 {
    background-color: lightpink;
  }

  .d5 {
    background-color: palegoldenrod;
    /* Item 5 occupies column 2 until 4 of the grid */
    grid-column: 2 / 4;
    /* Item 5 occupies row 2 until 4 of the grid */
    grid-row: 2 / 4;
  }

  .p5 {
    padding: 5px;
  }

  .container {
    font-size: 40px;
    font-family: monospace;
    width: 100%;
    padding: 5px;
    background-color: lightgrey;
    display: grid;
    /* Three columns */
    grid-template-columns: 1fr 1fr 1fr;
    /* Gap between columns */
    /* column-gap: 5px; */
    /* Two lines */
    grid-template-rows: 1fr 1fr 1fr;
    /* Gap between rows */
    /* row-gap: 5px; */
    /* Gap between rows and columns */
    gap: 5px 5px;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<div class="container">
  <div class="p5 d1">1</div>
  <div class="p5 d2">2</div>
  <div class="p5 d3">3</div>
  <div class="p5 d4">4</div>
  <div class="p5 d5">5</div>
</div>
<!-- Body ends -->

Área

<!-- index.html -->
<!-- Head starts -->
<style>
  .d1 {
    background-color: lightskyblue;
  }

  .d2 {
    background-color: lightsalmon;
  }

  .d3 {
    background-color: paleturquoise;
  }

  .d4 {
    background-color: lightpink;
  }

  .d5 {
    background-color: palegoldenrod;
    /* Starts at line 1, column 1 and ends before line 2 and before column 4 */
    /* 1 2 3 4 */
    /* 1 */
    /* 2 */
    /* 3 */
    /* 4 */
    grid-area: 1/1/2/4;
  }

  .p5 {
    padding: 5px;
  }

  .container {
    font-size: 40px;
    font-family: monospace;
    width: 100%;
    padding: 5px;
    background-color: lightgrey;
    display: grid;
    /* Three columns */
    grid-template-columns: 1fr 1fr 1fr;
    /* Gap between columns */
    /* column-gap: 5px; */
    /* Two lines */
    grid-template-rows: 1fr 1fr;
    /* Gap between rows */
    /* row-gap: 5px; */
    /* Gap between rows and columns */
    gap: 5px 5px;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<div class="container">
  <div class="p5 d1">1</div>
  <div class="p5 d2">2</div>
  <div class="p5 d3">3</div>
  <div class="p5 d4">4</div>
  <div class="p5 d5">5</div>
</div>
<!-- Body ends -->

Template area

<!-- index.html -->
<!-- Head starts -->
<style>
  .d1 {
    background-color: lightskyblue;
  }

  .d2 {
    background-color: lightsalmon;
  }

  .d3 {
    background-color: paleturquoise;
  }

  .d4 {
    background-color: lightpink;
  }

  .d5 {
    background-color: palegoldenrod;
    /* Positioning the item according to grid-template-areas naming*/
    grid-area: head;
  }

  .p5 {
    padding: 5px;
  }

  .container {
    font-size: 40px;
    font-family: monospace;
    width: 100%;
    padding: 5px;
    background-color: lightgrey;
    display: grid;
    /* Three columns */
    grid-template-columns: 1fr 1fr 1fr;
    /* Gap between columns */
    /* column-gap: 5px; */
    /* Two lines */
    grid-template-rows: 1fr 1fr 1fr;
    /* Gap between rows */
    /* row-gap: 5px; */
    /* Gap between rows and columns */
    gap: 5px 5px;
    /* Template areas */
    grid-template-areas:
      "head head head"
      "main main main"
      "footer footer footer";
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<div class="container">
  <div class="p5 d1">1</div>
  <div class="p5 d2">2</div>
  <div class="p5 d3">3</div>
  <div class="p5 d4">4</div>
  <div class="p5 d5">5</div>
</div>
<!-- Body ends -->

Into grid

<!-- index.html -->
<!-- header starts -->
<style>
  .d1 {
    background-color: lightskyblue;
    grid-area: header;
  }

  .d2 {
    background-color: lightsalmon;
    grid-area: advert;
  }

  .d3 {
    background-color: paleturquoise;
    grid-area: content;
    display: grid;
    grid-template-rows: auto 1fr;
  }

  .ph1 {
    background-color: palevioletred;
  }

  .ph2 {
    background-color: palegreen;
  }

  .d4 {
    background-color: lightpink;
    grid-area: footer;
  }


  .p5 {
    padding: 5px;
  }

  /* Default */
  .container {
    min-height: 300px;
    width: 100%;
    background-color: lightgrey;
    font-size: 1.5em;
    font-family: monospace;
    padding: 5px;
    display: grid;
    /* Three columns */
    grid-template-columns: 1fr;
    /* Gap between columns */
    /* column-gap: 5px; */
    /* Two lines */
    grid-template-rows: 50px auto 1fr auto;
    /* Gap between rows */
    /* row-gap: 5px; */
    /* Gap between rows and columns */
    gap: 5px 5px;
    /* Template areas */
    grid-template-areas:
      "header"
      "advert"
      "content"
      "footer";
  }

  @media (min-width: 300px) {
    .container {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "advert header"
        "advert content"
        "advert footer";
    }
  }

  @media (min-width: 600px) {
    .container {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "advert content"
        "advert footer";
    }
  }
</style>
<!-- Style block end -->
<!-- header ends -->
<!-- Body starts -->
<div class="container">
  <div class="p5 d1">Header</div>
  <div class="p5 d2">Advert</div>
  <div class="p5 d3">
    <div class="ph1">Paragraph 1</div>
    <div class="ph2">Paragraph 2</div>
  </div>
  <div class="p5 d4">footer</div>
</div>
<!-- Body ends -->

Repeat

<!-- index.html -->
<!-- Head starts -->
<style>
  .d1 {
    background-color: lightskyblue;
  }

  .d2 {
    background-color: lightsalmon;
  }

  .d3 {
    background-color: paleturquoise;
  }

  .d4 {
    background-color: lightpink;
  }

  .d5 {
    background-color: palegoldenrod;
  }

  .p5 {
    padding: 5px;
  }

  .container {
    font-size: 40px;
    font-family: monospace;
    width: 100%;
    padding: 5px;
    background-color: lightgrey;
    display: grid;
    /* Three columns */
    grid-template-columns: repeat(3, 1fr);
    /* Gap between columns */
    /* column-gap: 5px; */
    /* Two lines */
    grid-template-rows: repeat(2, 1fr);
    /* Gap between rows */
    /* row-gap: 5px; */
    /* Gap between rows and columns */
    gap: 5px 5px;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<div class="container">
  <div class="p5 d1">1</div>
  <div class="p5 d2">2</div>
  <div class="p5 d3">3</div>
  <div class="p5 d4">4</div>
  <div class="p5 d5">5</div>
</div>
<!-- Body ends -->

Repeat autofill

<!-- index.html -->
<!-- Head starts -->
<style>
  .d1 {
    background-color: lightskyblue;
  }

  .d2 {
    background-color: lightsalmon;
  }

  .d3 {
    background-color: paleturquoise;
  }

  .d4 {
    background-color: lightpink;
  }

  .d5 {
    background-color: palegoldenrod;
  }

  .p5 {
    padding: 5px;
  }

  .container {
    font-size: 40px;
    font-family: monospace;
    width: 100%;
    min-height: 100px;
    padding: 10px;
    background-color: lightgrey;
    display: grid;
    /* auto-fill dynamic number of columns according to page size */
    /* minmax minimum and max number of grid element according to page size */
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    /* Gap between columns */
    /* column-gap: 5px; */
    /* Two lines */
    grid-template-rows: repeat(3, 1fr);
    /* Gap between rows */
    /* row-gap: 5px; */
    /* Gap between rows and columns */
    gap: 10px;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<div class="container">
  <div class="p5 d1">1</div>
  <div class="p5 d2">2</div>
  <div class="p5 d3">3</div>
  <div class="p5 d4">4</div>
  <div class="p5 d5">5</div>
</div>
<!-- Body ends -->

Repeat autofit

<!-- index.html -->
<!-- Head starts -->
<style>
  .d1 {
    background-color: lightskyblue;
  }

  .d2 {
    background-color: lightsalmon;
  }

  .d3 {
    background-color: paleturquoise;
  }

  .d4 {
    background-color: lightpink;
  }

  .d5 {
    background-color: palegoldenrod;
  }

  .p5 {
    padding: 5px;
  }

  .container {
    font-size: 40px;
    font-family: monospace;
    width: 100%;
    min-height: 100px;
    padding: 10px;
    background-color: lightgrey;
    display: grid;
    /* fit dynamic number of columns according to page size fitting the entire length of the container */
    /* minmax minimum and max number of grid element according to page size */
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    /* Gap between columns */
    /* column-gap: 5px; */
    /* Two lines */
    grid-template-rows: repeat(3, 1fr);
    /* Gap between rows */
    /* row-gap: 5px; */
    /* Gap between rows and columns */
    gap: 10px;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<div class="container">
  <div class="p5 d1">1</div>
  <div class="p5 d2">2</div>
  <div class="p5 d3">3</div>
  <div class="p5 d4">4</div>
  <div class="p5 d5">5</div>
</div>
<!-- Body ends -->