CSSGridLayout/index2.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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!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 Grid</title>

<style media="screen">
  .grid-container {
    display: grid;
    /* grid-template-columns: 1fr 2fr 1fr; */
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1em;
    /* grid-auto-rows: 100px; */

    grid-auto-rows: minmax(100px, auto);
  }

  .nested {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 70px;
    grid-gap: 1em;
  }

  .grid-container > div {
    background: #eee;
    padding: 1em;
  }
  .grid-container > div:nth-child(odd){
    background: #ddd;
  }

  .nested > div {
    border: #333 1px solid;
    padding: 1em;
  }
</style>

</head>
<body>
  <div class="grid-container">
    <div>
      Lorem ipsum dolor sit.
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim neque, quasi ab quia atque alias in fugit, animi laudantium, architecto rerum molestiae eveniet commodi labore. Accusantium assumenda ullam fugiat sunt, itaque quis voluptates explicabo temporibus illo. Itaque quasi, recusandae maiores.
    </div>
    <div class="nested">
      <div>lorem</div>
      <div>lorem</div>
      <div>lorem</div>
      <div>lorem</div>
      <div>lorem</div>
      <div>lorem</div>
      <div>lorem</div>
      <div>lorem</div>
      <div>lorem</div>
    </div>
    <div>
      Lorem ipsum dolor sit.
    </div>
    <div>
      Lorem ipsum dolor sit.
    </div>
    <div>
      Lorem ipsum dolor sit.
    </div>
    <div>
      Lorem ipsum dolor sit.
    </div>
  </div>
</body>
</html>