Landing Page Using Grid Methodology

I am making a sample page using only CSS grid for the rows and different sections. I am considering to use a container in each section and apply the grid to that container. Or use a child row, then apply my grid for the elements. Any good flow to follow. As an example:

<section class="services_section">
    <div class="container">
       <div class="grid">
           <div class="col">
            </div>
         </div>
    </div>
</section>

<section class="services_section">
    <div class="container">
       <div class="grid">
           <div class="col">
            </div>
         </div>
    </div>
</section>

Is this flow considered okay, or adding the grid class to the container to reduce an HTML. Feedback much appreciated.

Chris Bolson•1/6/25, 9:52 AM

I personally would only create a container if it is really needed. If the classes/properties can be applied to the parent container, without breaking the design, I wouldn't add it.

Simon•1/6/25, 10:01 AM

I agree. The section could potentially hold the information while you can have child elements with dedicated – there is basically no need to go three levels deep to apply a grid.

SSimon I agree. The section could potentially hold the `grid-template` information whil...

YN20OP•1/6/25, 6:14 PM

thanks i actually followed that and just used the grid template columns. as it can act as container so far worked well. it kind of did the container job. but if i use any css framework like tailwind i would use the container.

CChris Bolson I personally would only create a container if it is really needed. If the classe...

YN20OP•1/6/25, 6:15 PM

Thanks may know when using frameworks like tailwind do you use container just to hold the content. its common to use container in bootstrap.