Make CSS3 grid layout in 1 minute

Website

If you are having difficulty with CSS3 Grid and you need to quickly write a layout, then this tool may help you.

The interface of the tool is very simple, you can change the size, change the location of the widgets. You can highlight rows and columns in the grid, and in the end you just get the generated CSS code

Let's create our html file and put the already generated css code

<style>
  /* A little style 💅 */
  .container > div {
    background-color: rgb(211, 234, 252);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
  }

  .container {
    display: grid;
    grid-template-areas:
      "Header Header Header Header Header"
      "Left Main Main Main Right"
      "Left Main Main Main Right"
      "Left Main Main Main Right"
      "Left Main Main Main Right"
      "Left Main Main Main Right"
      "Footer Footer Footer Footer Footer";
    grid-template-rows: 100px auto auto auto auto auto 100px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
  }

  .head {
    grid-area: Header;
  }
  .left {
    grid-area: Left;
  }
  .main {
    grid-area: Main;
  }
  .right {
    grid-area: Right;
  }
  .footer {
    grid-area: Footer;
  }
</style>

<div class="container">
  <div class="head"></div>
  <div class="left"></div>
  <div class="main">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur.......
  </div>
  <div class="right"></div>
  <div class="footer"></div>
</div>

I just changed the grid-template-rows

Let's look at the result

Links

Website

Repo

@vaheqelyan