Grid CSS Study

by Fabio Dan

HTML

<div class="grid-container">
  <div class="grid-item">
    <!-- Card -->
    <div class="card">
      <img src="https://web.500px.com/static/media/[email protected]" alt="" class="card__img">
      <section class="card__text-section">
        <h2 class="card__heading">Heading</h2>
        <p class="card__paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quas necessitatibus minus quos quisquam similique vitae molestiae optio dignissimos, laudantium officia quis mollitia, hic sunt autem voluptatum tenetur libero pariatur.</p>
        <ul class="card__list">
          <li class="card__list-item">Item 1</li>
          <li class="card__list-item">Item 2</li>
          <li class="card__list-item">Item 3</li>
          <li class="card__list-item">Item 4</li>
          <li class="card__list-item">Item 5</li>
        </ul>
      </section>      
    </div>
    <!-- /Card -->
  </div>
  <div class="grid-item">
    <!-- Card -->
    <div class="card">
      <img src="https://web.500px.com/static/media/[email protected]" alt="" class="card__img">
      <section class="card__text-section">
        <h2 class="card__heading">Heading</h2>
        <p class="card__paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quas necessitatibus minus quos quisquam similique vitae molestiae optio dignissimos, laudantium officia quis mollitia, hic sunt autem voluptatum tenetur libero pariatur.</p>
        <ul class="card__list">
          <li class="card__list-item">Item 1</li>
          <li class="card__list-item">Item 2</li>
          <li class="card__list-item">Item 3</li>
          <li class="card__list-item">Item 4</li>
          <li class="card__list-item">Item 5</li>
        </ul>
      </section>      
    </div>
    <!-- /Card -->
  </div>  
  <div class="grid-item">
    <!-- Card -->
    <div class="card">
      <img src="https://web.500px.com/static/media/[email protected]" alt=""...

CSS

/* GLOBAL */
:root {
  --spacing-medium: 16px;
  --color-white: rgba(255, 255, 255, 1);
  --color-charcoal: rgba(61, 61, 61, 1);
}

body {
  font-family: "Avenir", sans-serif;
  color: var(--color-charcoal);
  margin: 0;
}

/* GRID */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* background: cyan; */
}

.grid-item {
  /* background: magenta; */
}

/* CARD */
.card {
  border-radius: 4px;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 
  background: var(--color-white);
}

.card__heading {
  margin: 0;
}

.card__paragraph {
  margin: 0;
}

.card__list {
  padding: 0;
  list-style-position: inside;
}

.card__img {
  width: 100%;
  vertical-align: middle;
  border-radius: 4px 4px 0 0;  
}

.card__text-section {
  padding: var(--spacing-medium);
}