Trying to create an HTML CSS Grid for a website

AnesuMazvimavi
May 26, 2024
117 views
0 votes
2 Answers

I am building a website for a law firm and I am trying to implement a CSS grid like in the image below.

I have issues adding icons and padding in each grid to deal with as well.

.grid-column {
  float: left;
  width: 31%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
  margin: 10px;
  font-family: Arial, Helvetica, sans-serif; 
}
    
/* Clear floats after the columns */
.grid-row:after {
  content: "";
  display: table;
  clear: both;
}
    
/* Wrap text within columns */
.grid-column h2, .grid-column p {
  max-width: 80%; /* Adjust as needed */
  white-space: wrap;
}

<div class="grid-row">
  <div class="grid-column" style="background-color:#aaa;">
    <h2>Corporate & Security</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
  </div>
  <div class="grid-column" style="background-color:#bbb;">
    <h2>Medical & Health Care</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
  </div>
  <div class="grid-column" style="background-color:#ccc;">
    <h2>Pensions & Benefits Law</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
  </div>
</div>
    
<div class="grid-row">
  <div class="grid-column" style="background-color:#aaa;">
    <h2>Home Credit Law</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
  </div>
  <div class="grid-column" style="background-color:#bbb;">
    <h2>Life Insurance Law</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
  </div>
  <div class="grid-column" style="background-color:#bbb;">
    <h2>E-Commerce Law</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
  </div>
</div>

This is what I am trying to replicate:

Answers

As @Temani Afif suggested you can use css grid layout for this.

.grid-column-wrapper{
  display:grid;
  grid-template-rows: repeat(2,1fr);
  grid-gap:1rem;
}

.grid-row{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap:1rem;
}

.grid-column {
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif; 
}

<div class="grid-column-wrapper"> 
  <div class="grid-row">
      <div class="grid-column" style="background-color:#aaa;">
        <h2>Corporate & Security</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
      </div>
      <div class="grid-column" style="background-color:#bbb;">
        <h2>Medical & Health Care</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
      </div>
      <div class="grid-column" style="background-color:#ccc;">
        <h2>Pensions & Benefits Law</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
      </div>
  </div>

  <div class="grid-row">
      <div class="grid-column" style="background-color:#aaa;">
        <h2>Home Credit Law</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
      </div>
      <div class="grid-column" style="background-color:#bbb;">
        <h2>Life Insurance Law</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
      </div>
      <div class="grid-column" style="background-color:#bbb;">
        <h2>E-Commerce Law</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
      </div>
  </div>
</div>

Use CSS grid
No need to use additional <div> for rows
Create responsive grid-template-columns using CSS repeat with auto-fit and minmax

*,
*::after,
*::before {
  margin: 0;
  box-sizing: border-box;
}

:root {
  --primary: hsl(33 75% 67%);
}

body {
  font: 1em/1.4 arial;
  color: hsl(20 15% 24%);
}

a {
  color: var(--primary);
}

.grid {
  --maxColumns: 3;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(100%/var(--maxColumns), 16rem), 1fr));
}

.card {
  background: #fafafa;
  margin: 0.5rem;
  padding: 1rem;
  box-shadow: 0.5rem 0.5rem 0 hsl(0 4% 95%);
  
  & h2 {
    font-weight: 100;
    padding: 1rem 0;
  }
  & .ico {
    color: var(--primary);
    font-size: 3rem;
  }
  & a {
    display: block;
    padding: 1rem 0;
  }
}

<div class="grid">
  <div class="card">
    <span class="ico">&#x1d4d2;</span>
    <h2>Corporate &amp; Security</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
    <a href="#!">Learn more &rarr;</a>
  </div>
  <div class="card">
    <span class="ico">&#x1d4dc;</span>
    <h2>Medical &amp; Health Care</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
    <a href="#!">Learn more &rarr;</a>
  </div>
  <div class="card">
    <span class="ico">&#x1d4df;</span>
    <h2>Pensions &amp; Benefits Law</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
    <a href="#!">Learn more &rarr;</a>
  </div>
  <div class="card">
    <span class="ico">&#x1d4d7;</span>
    <h2>Home Credit Law</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
    <a href="#!">Learn more &rarr;</a>
  </div>
  <div class="card">
    <span class="ico">&#x1d4db;</span>
    <h2>Life Insurance Law</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
    <a href="#!">Learn more &rarr;</a>
  </div>
  <div class="card">
    <span class="ico">&#x1d4d4;</span>
    <h2>E-Commerce Law</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus nec ullamcorper mattis</p>
    <a href="#!">Learn more &rarr;</a>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.