Difference between revisions of "Team:Tuebingen/Team"

(Replaced content with "<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>")
Line 1: Line 1:
−
<!DOCTYPE html>
+
<html lang="en">
−
<html>
+
<head>
−
<body>
+
  <title>CSS Grid</title>
 +
  <style>
 +
    .wrapper{
 +
      display:grid;
 +
      /* grid-template-columns:1fr 1fr 1fr;*/
 +
      grid-template-columns:repeat(3, 1fr);
 +
      grid-gap:1em;
 +
      /* grid-auto-rows:100px; */
 +
      grid-auto-rows: minmax(100px, auto);
 +
    }
  
−
<h1>My First Heading</h1>
+
    .nested{
 +
      display:grid;
 +
      grid-template-columns:repeat(3, 1fr);
 +
      grid-auto-rows: 70px;
 +
      grid-gap:1em;
 +
    }
  
−
<p>My first paragraph.</p>
+
    .wrapper > div{
 +
      background:#eee;
 +
      padding:1em;
 +
    }
 +
    .wrapper > div:nth-child(odd){
 +
      background:#ddd;
 +
    }
  
 +
    .nested > div{
 +
      border:#333 1px solid;
 +
      padding:1em;
 +
    }
 +
  </style>
 +
</head>
 +
<body>
 +
  <div class="wrapper">
 +
    <div>
 +
      Lorem ipsum dolor sit.
 +
    </div>
 +
    <div>
 +
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam libero excepturi cupiditate quasi sit. Iure totam a magni, veritatis, voluptatem voluptates tempora praesentium et nisi eligendi. A saepe eaque aliquam, earum nihil quia? Nemo delectus possimus, explicabo repudiandae recusandae. Mollitia!
 +
    </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>
 
</body>
 
</html>
 
</html>

Revision as of 17:11, 31 October 2017

CSS Grid

Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam libero excepturi cupiditate quasi sit. Iure totam a magni, veritatis, voluptatem voluptates tempora praesentium et nisi eligendi. A saepe eaque aliquam, earum nihil quia? Nemo delectus possimus, explicabo repudiandae recusandae. Mollitia!
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem
Lorem ipsum dolor sit.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit.