'Correct way to align icons and text within a css grid?

What is the best way to achieve the design? My code below works the way I want it to, but I think it maybe bad practice, having googled the subject I am relying on SO to confirm.

Currently I set the grid-template-column to 0fr, 1fr, I want the icon section to take up only what space it needs rather than 1fr, 1fr and space between.

.os {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0px 10px 60px 10px;
}

.service {
  display: grid;
  grid-template-columns: 0fr 1fr;
  align-items: center;
  margin: 0px 5px 10px 5px;
  padding: 15px;
  grid-gap: 20px;
  background-color: #f8f8f8;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.service i {
  color: #242424;
  font-size: 30px;
  ;
}
<script src="https://kit.fontawesome.com/23a8029d38.js" crossorigin="anonymous"></script>
<div class="white-section">
  <div class="os container">
    <div class="service">
      <i class="fa-solid fa-pen-ruler circle"></i> Test 1
    </div>
    <div class="service">
      <i class="fa-solid fa-pen-ruler circle"></i> Test 2
    </div>
    <div class="service">
      <i class="fa-solid fa-pen-ruler circle"></i> Test 3
    </div>
  </div>
</div>

Sorry for external link to jsfiddle, I don't know how to include the font awesome library to show icons. https://jsfiddle.net/w9evo0ky/

htmlcsscss-grid


Solution 1:[1]

You could instead use min-max to set a minimum value for the first column. Furthermore, you could use grid-template-rows: 1fr to make sure both items have equal height. I used font-size: clamp for demonstration, so both the icon and the text will have a responsive height, width and font-size when you drag your screen-size, try it out!

.os {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0px 10px 60px 10px;
}

.service {
  display: grid;
  grid-template-columns: minmax(20px, auto) 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  margin: 0px 5px 10px 5px;
  padding: 15px;
  grid-gap: 20px;
  font-size: clamp(1rem, 5vw, 5rem);
  background-color: #f8f8f8;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.service i {
  color: #242424;
}
<script src="https://kit.fontawesome.com/23a8029d38.js" crossorigin="anonymous"></script>
<div class="white-section">
  <div class="os container">
    <div class="service">
      <i class="fa-solid fa-pen-ruler circle"></i> Test 1
    </div>
    <div class="service">
      <i class="fa-solid fa-pen-ruler circle"></i> Test 2
    </div>
    <div class="service">
      <i class="fa-solid fa-pen-ruler circle"></i> Test 3
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sigurd Mazanti

Related Questions