zakkudesu
8/2/2019 - 5:23 AM

Grid with Flexbox

/*<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Grid Layout &amp; Flexbox</title>
	  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    
	  <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Raleway" rel="stylesheet">
    <link href="css/page.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
  </head>
  <body>
    <div class="main-content">    
      <div class="card">
        <i class="material-icons icn-ent">videocam</i>
        <h1>Entertainment</h1>
        <p>Hundreds of VR games and films have been released already. <a href="#">Oculus Story Studio</a> is one example of a company producing VR films.</p>
        <a class="btn" href="#">Learn more</a>
      </div>
      
      <div class="card">
        <i class="material-icons icn-arch">account_balance</i>
        <h1>Architectural Visualization</h1>
        <p>These experiences allow you to explore and interact with buildings and products in virtual reality. <a href="#">IKEA VR</a> is a popular example.</p>
        <a class="btn" href="#">Learn more</a>        
      </div>
      
      <div class="card"> 
        <i class="material-icons icn-edu">school</i>
        <h1>Education</h1>
        <p>VR allows students to visit other places and other times. For instance, the BBC produced a <a href="#">360° video</a> that allows users to see the scale of dinosaurs in stereoscopic 3D.</p>
        <a class="btn" href="#">Learn more</a>        
      </div> 
      
      <div class="card">
        <i class="material-icons icn-sim">flight_takeoff</i>
        <h1>Simulation &amp; Training </h1>
        <p>In simulation and training, you can safely train for dangerous situations or hazardous environments.</p>
        <a class="btn" href="#">Learn more</a>
      </div>
      
      <div class="card">
        <i class="material-icons icn-soc">people</i>
        <h1>Social Networking</h1>
        <p>VR is finding its way into teleconferencing and social media. At the <a href="#">ethic conference in 2016</a>, Facebook demonstrated what it might look like in VR.</p>
        <a class="btn" href="#">Learn more</a>        
      </div>
      
      <div class="card"> 
        <i class="material-icons icn-games">videogame_asset</i>
        <h1>Games</h1>
        <p>VR games let users experience a 3D environment, creating suspension of disbelief, which makes users experience the environment as real.</p>
        <a class="btn" href="#">Learn more</a>        
      </div>                
    </div>
  </body>
</html> */

/* ===================================== 
   Page Styles
======================================== */

* {
	box-sizing: border-box;
}
body {
  font-size: 1rem;
  line-height: 1.5;
	font-family: 'Raleway', sans-serif;
  text-align: center;
  margin: 0;
}
a {
  color: #278da4;
  text-decoration: none;
}
h1 {
  font-family: 'Bree Serif', serif;
}
p {
  margin-bottom: 1.25em;
}
.main-content {
  margin: 2em auto;
}
.card {
  padding: 1.5em 1em;
  border: 1px solid #e1e1e1;
  border-radius: 0.25em;
}
.card h1 {
  color: #278da4; 
  margin: 0.35em 0 0;
  line-height: 1.25;
}
.btn {
  font-size: 0.85em;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.75em 1.5em;
  background-color: #278da4;
  border-radius: 0.35em;
  display: inline-block;
}
.btn:hover {
  background-color: rgba(39, 141, 164, 0.8);
}
.material-icons {
  color: rgba(39, 141, 164, 0.8); 
  font-size: 2.1em;
}

/* ===================================== 
   Grid & Flexbox Layout
======================================== */

.main-content {
  width: 95%;
  max-width: 1000px;
  
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
}

.btn {
  margin-top: auto;
}