Grid

by Van Hai Le

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css">
<header>
  <img class='header-image' src="https://images.unsplash.com/photo-1549286446-e661eaf8df23?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=500&h=500&fit=crop&ixid=eyJhcHBfaWQiOjF9" alt="">
  <h1>Grid layout</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, dolorem.</p>
</header>

<main class='main-section'>
  <div class="featured-post">
    <img class='featured-post__image' src="https://images.unsplash.com/photo-1549419590-4d9aae47cb7e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=500&h=200&fit=crop&ixid=eyJhcHBfaWQiOjF9" alt="">
    <div class="featured-post__description">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, aut?</p>
    </div>
  </div>
  <div class="posts">
    <div class="post">
      <img src="https://images.unsplash.com/photo-1550071765-dc4ed6fbab22?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=500&h=500&fit=crop&ixid=eyJhcHBfaWQiOjF9" alt="">
      <div class="post-description">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla natus ex, expedita quaerat et sint doloribus sapiente enim inventore voluptas!</p>
      </div>
    </div>
    <div class="post">
      <img src="https://images.unsplash.com/photo-1550071765-dc4ed6fbab22?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=500&h=500&fit=crop&ixid=eyJhcHBfaWQiOjF9" alt="">
      <div class="post-description">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla natus ex, expedita quaerat et sint doloribus sapiente enim inventore voluptas!</p>
      </div>
    </div>
    <div class="post">
      <img src="https://images.unsplash.com/photo-1550071765-dc4ed6fbab22?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=500&h=500&fit=crop&ixid=eyJhcHBfaWQiOjF9" alt="">
      <div class="post-description">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing...

SCSS

.header-image {
  border-radius: 50%;
  height: 10em;
  width: 10em;
}

.featured-post {
  text-align: center;
  background-color: #eee;
  width: 80%;
  margin: auto;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 15px;
}

.featured-post__image {
  width: 100%;
}

header {
  text-align: center;
  margin-bottom: 48px;
}

.posts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 80%;
  margin: auto;
  grid-gap: 10px;
  margin-bottom: 16px;
}

.post {
  /* padding: 15px; */
  text-align: center;
  overflow: hidden;
  border-radius: 15px;
  box-shadow:2px 3px 5px rgba(0,0,0,0.24);
  background-color: #eee;
}

.post:hover {
  background-color: #ddd;
}

.post > img {
  width: 100%;
}

footer {
  background-color: LimeGreen;
  display: grid;
  grid-template-columns: repeat(4, 50px);
  min-height: 100px;
  justify-content: center;
  align-content: center;
  grid-column-gap: 10px;
}
footer > div {
  background-color: ForestGreen;
  padding: 15px;
  text-align: center;
}