CSSGridLayout/index.html at master · tiosputra/CSSGridLayout · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Grids</title>
  <style media="screen">
  .grid-container {
    display: grid;
    grid-template-columns: 70% 30%;
    /*
    grid-column-gap: 1em;
    grid-row-gap: 1em; */

    grid-gap: 1em;
  }
    .grid-container > div {
      background: #eee;
      padding: 1em;
    }
    .grid-container > div:nth-child(odd){
      background: #ddd;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique dolorum, pariatur doloribus, ut reprehenderit ad perferendis eveniet non minima fuga! Mollitia numquam officiis cum, autem nisi excepturi ab harum nesciunt voluptatibus deserunt eius sint odio repellat. Consectetur voluptatibus ipsam ad aliquid adipisci commodi repellendus neque, tempore reprehenderit earum. Dolores beatae sapiente reprehenderit distinctio aliquid, ipsam quasi inventore voluptatibus cumque fuga molestias, assumenda deleniti necessitatibus, adipisci. Velit temporibus, totam soluta natus neque fugiat magnam facere, aut perspiciatis quo, dolor consectetur vero.
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolores cumque, ut sunt accusamus possimus esse molestias velit. Nostrum fuga officia praesentium ex alias corrupti reiciendis, iste possimus quae. Laudantium.
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique dolorum, pariatur doloribus, ut reprehenderit ad perferendis eveniet non minima fuga! Mollitia numquam officiis cum, autem nisi excepturi ab harum nesciunt voluptatibus deserunt eius sint odio repellat. Consectetur voluptatibus ipsam ad aliquid adipisci commodi repellendus neque, tempore reprehenderit earum. Dolores beatae sapiente reprehenderit distinctio aliquid, ipsam quasi inventore voluptatibus cumque fuga molestias, assumenda deleniti necessitatibus, adipisci. Velit temporibus, totam soluta natus neque fugiat magnam facere, aut perspiciatis quo, dolor consectetur vero.
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum dolores cumque, ut sunt accusamus possimus esse molestias velit. Nostrum fuga officia praesentium ex alias corrupti reiciendis, iste possimus quae. Laudantium.
    </div>
    <div>Hello</div>
  </div>
</body>
</html>