Kevin Powell - Community•2w ago

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.

3 Replies

Chris Bolson•2w ago

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•2w ago

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

YN20OP•2w ago

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. Thanks may know when using frameworks like tailwind do you use container just to hold the content. its common to use container in bootstrap.

Gaming

Programming

Landing Page Using Grid Methodology

Did you find this page helpful?