Four-Card Feature Section Using CSS Grid and Flex

Community feedback

• 

  Aakash Verma•9,500

  @skyv26

  Posted 6 months ago

  Hi @vinayagamRVK,

  👋 I went through your CSS and have a few suggestions to help improve responsiveness, maintainability, and best practices. Let’s dive in! 🚀

  ---

  1️⃣ Avoid Using height Unless Necessary 🛑

  Using the height property can make responsiveness tricky. Instead, let your inner elements dictate the height using padding, margin, or content. It will save you time and effort when adjusting layouts for different devices. 🎯

  ---

  2️⃣ Use position: absolute Only When Truly Needed 🧩

  I noticed you used absolute for the image in the card. While it can sometimes work, it’s better to avoid it unless absolutely necessary. Instead, consider using flexbox or grid for alignment. It’s more robust and easier to maintain. 💡

  3️⃣ Keep It DRY (Don’t Repeat Yourself) 🚿

  Repetitive CSS can make your file bulky and harder to maintain. Consolidating shared styles into reusable classes or variables will streamline your CSS. 🪄

  Example:

  Instead of repeating styles:

  .card-title {
    font-size: 24px;
    color: #333;
  }
  .card-subtitle {
    font-size: 20px;
    color: #333;
  }
  

  Use a shared class:

  .text-large {
    color: #333;
  }
  .card-title {
    font-size: 24px;
  }
  .card-subtitle {
    font-size: 20px;
  }
  

  ---

  Final Refactored CSS Code 🛠️

  Here's the updated CSS file for your project:

  ./* CSS Reset */
  * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
  }
  
  html,
  body {
      height: 100%;
  }
  
  /* Custom Properties */
  :root {
      --red: hsl(0, 78%, 62%);
      --cyan: hsl(180, 62%, 55%);
      --orange: hsl(34, 97%, 64%);
      --blue: hsl(212, 86%, 64%);
      --darkGrey: hsl(234, 12%, 34%);
      --lightGrey: hsl(229, 6%, 66%);
      --white: hsl(0, 0%, 98%);
  }
  
  body {
      font-family: "Poppins", serif;
      font-weight: 400;
      font-style: normal;
      padding: 40px;
      background-color: hsl(0, 0%, 98%);
  }
  
  .header {
      text-align: center;
      padding: 30px 0px 12px 0px;
  }
  
  .header h2:first-child {
      font-weight: 100;
      font-size: 35px;
      color: var(--darkGrey);
  }
  
  .header .heading-two {
      font-weight: 600;
      margin-top: 3px;
      margin-bottom: 20px;
      color: var(--darkGrey);
      font-size: 38px;
  }
  
  .header>p {
      font-size: 15px;
      font-weight: 200;
      color: var(--lightGrey);
      display: inline-block;
      width: 40%;
      line-height: 24px;
  }
  
  .card-section {
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: center;
      justify-content: center;
      margin-top: 40px;
  }
  
  @media (min-width: 1024px) {
      .card-section {
          flex-direction: row;
      }
  }
  
  .card-section__supervisor {
      border-top: 5px solid var(--cyan);
  }
  
  .card-section__supervisor>h3 {
      color: var(--darkGrey);
  }
  
  .card-section__supervisor>p {
      color: var(--lightGrey);
      font-size: 15px;
  }
  
  .card-section__middle {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
  }
  
  /* calculator section */
  .calculator {
      border-top: 5px solid var(--blue);
  }
  
  .calculator h3 {
      color: var(--darkGrey);
  }
  
  .calculator>p {
      color: var(--lightGrey);
      font-size: 15px;
      margin-top: 10px;
  }
  
  .card-section__middle .team-builder {
      border-top: 5px solid var(--red);
  
  }
  
  .team-builder>p {
      color: var(--lightGrey);
      font-size: 15px;
      margin-top: 10px;
  }
  
  .team-builder h3 {
      color: var(--darkGrey);
  }
  
  .card_container {
      display: flex;
      flex-direction: column;
      height: max-content;
      border-radius: 10px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      width: 100%;
      max-width: 360px;
      padding: 20px;
  }
  
  .card-image {
      margin-top: 70px;
      width: max-content;
      align-self: flex-end;
  }
  
  .card-section__middle .karma {
      border-top: 5px solid var(--orange);
  }
  
  .card-section__middle .karma p {
      font-size: 15px;
      color: var(--lightGrey);
      margin-top: 10px;
  }
  
  .karma h3 {
      color: var(--darkGrey);
  }
  

  
    <div class="card-section">
      <!--Grid Container-->
  
      <!-- Supervisor Card -->
        <div class="card_container card-section__supervisor">
          <h3>Supervisor</h3>
          <p> Monitors activity to identify project roadblocks</p>
          <img  class="card-image" src="./images/icon-supervisor.svg" alt="Supervisor">
        </div>
  
      <div class="card-section__middle">
        <!--Flex container-->
  
        <div class="card_container team-builder">
          <h3>Team Builder</h3>
          <p>Scans our talent network to create the optimal team for your project</p>
          <img class="card-image" src="./images/icon-team-builder.svg" alt="team-builder-image card" loading="lazy">
        </div>
  
        <div class="card_container karma">
          <h3>Karma</h3>
          <p> Regularly evaluates our talent to ensure quality</p>
          <img  class="card-image" src="./images/icon-karma.svg" alt="karma-image">
        </div>
      </div>
  
        <div class="card_container calculator">
          <h3> Calculator</h3>
          <p> Uses data from past projects to provide better delivery estimates</p>
          <img  class="card-image" src="./images/icon-calculator.svg" alt="calculator-image">
        </div>
  
    </div>
  
  

  ---

  TL;DR Summary:

  • ✅ Let padding/margin decide your height.
  • ✅ Avoid unnecessary position: absolute.
  • ✅ Make your code DRY.

  Great work so far! Keep it up, and you’ll have a beautifully styled project in no time. 🌟 If you have any questions, feel free to reach out. 😊

  Cheers,
  Aakash 🚀

  04

  Marked as helpful