My goal is to utilize CSS Grid in order to design a blurb layout featuring 2 columns at the top and a full row below. This will allow for an FA Icon and Title, accompanied by a full description below, similar to the image provided.
I believe I have successfully set up the grid layout, however, I am uncertain of how to ensure that the width of the top 2 columns (icon and title) adjust together and automatically fit the content?
Would utilizing firebox make this task easier?
Thank you,
https://i.sstatic.net/QrMyR.jpg
HMTL
<div class="main_description_container">
<div class="description_gridwrapper">
<div id="icon"><i class="fas fa-info-circle"><!--tr--></i></div>
<div id="title"><h3>Title Text</h3></div>
<div id="text">Long Paragraph Text</div>
</div>
</div>
CSS
.main_description_container{
display: block;
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.description_gridwrapper {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 0px;
height: 100%;
}
.description_gridwrapper #icon {
background-color: #68dd99;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 2;
}
.description_gridwrapper #icon i.fas{
color: #B1DDF1;
font-size: 36px !important;
max-width: 36px !important;
width: 36px !important;
}
.description_gridwrapper #title {
background-color: #D75DDC;
grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 2;
grid-column-end: 3;
color: #31324E;
}
.description_gridwrapper #text {
background-color: #9FDABB;
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 3;
}