Skip to main content
davidhelp
davidhelp
Inspiring
March 21, 2021
Answered

Grid layout basics explained

  • March 21, 2021
  • 4 replies
  • 1486 views

Grid layout basics explained please.

Why for grid-template-areas it is listed:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';

 

That is 6 across for 3 columns and 3 rows

Why is it not 3 across for the header and 1 each for menu, main, right etc?

 

 

.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;

 

From:

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_grid-area_named4

    This topic has been closed for replies.
    Correct answer osgood_

    Hello

    Thanks for answering.

    I found this https://www.quackit.com/html/tutorial/html_layouts.cfm and it shows a similiar layout but uses what you see below. I guess there is more then one way to code that creates the same layout which is what is confusing for me.

     

    display: grid;
    grid-template-areas:
    "header header header"
    "nav article ads"
    "footer footer footer";


    quote

    Hello

    Thanks for answering.

    I found this https://www.quackit.com/html/tutorial/html_layouts.cfm and it shows a similiar layout but uses what you see below. I guess there is more then one way to code that creates the same layout which is what is confusing for me.

     

    display: grid;
    grid-template-areas:
    "header header header"
    "nav article ads"
    "footer footer footer";

     

     

    That's because the columns are set as percentages:

    grid-template-columns: 20% 1fr 15%;

    It uses a combination of grid areas and columns specifically set on the grid container.

     

    Yes, there is no hard and fast rules in terms of creating a css grid layout. The same layout can be achieved using different approaches.

    4 replies

    B i r n o u
    B i r n o u
    Legend
    March 23, 2021

    sorry for being later on that one, I was out for a while...

     

    Without wanting to be a tongue in cheek (is the expression "tongue in cheek" correct in English?), I think that everyone is right in each of the various visions expressed so far. using or not such tools... ???


    From my point of view, in an objective and broad way, there are two angles that are opposed...:

    • on the first one, we have to put in phase, purism and reality of the ground....
    • on the second, pragmatism and economic model...

     

    anyway, from our day, the life span of a web site, which is not an application, is continuously debatable and questioned every year, the customers who call upon small structures are less and less numerous, the budgets are tighter and tighter, the bar placed by the competition in front of the free models (do it yourself) is higher and higher.... this translates into costs that have to be lower and lower, for shorter and shorter realization times...


    the equation is set...


    to use or not templates ready to use, to use libraries, to have recourse to automatisms, .... or to make custom made by hand, there is the question... ???

     

    the Web entered its industrial period, in mass consumption with its batch of companies of great distribution... when the migrant workforce of the countries in the process of pauperization  ?


    the qualification will be a frustrating tool (in front of the loss of quality) but gratifying in front of the ease of handling (productivity and adaptability)

     

     

     

      O
      osgood_
      Legend
      March 23, 2021
      quote

      anyway, from our day, the life span of a web site, which is not an application, is continuously debatable and questioned every year, the customers who call upon small structures are less and less numerous, the budgets are tighter and tighter, the bar placed by the competition in front of the free models (do it yourself) is higher and higher.... this translates into costs that have to be lower and lower, for shorter and shorter realization times...


      the equation is set...


      to use or not templates ready to use, to use libraries, to have recourse to automatisms, .... or to make custom made by hand, there is the question... ???

       

      the Web entered its industrial period, in mass consumption with its batch of companies of great distribution... when the migrant workforce of the countries in the process of pauperization  ?


      the qualification will be a frustrating tool (in front of the loss of quality) but gratifying in front of the ease of handling (productivity and adaptability)

       

       

      Very true, that's why I'm pretty pleased to say that I, so far,  have no regrets about stepping away from full-time web-development. I just couldnt hack the every decreasing opportunities, the myriad of new workflows, more cost related than how professional the job is produced etc etc.

       

      I still keep my hand in by experimentation mostly these days and managing about a dozen websites previously built in the last five years. But will I ever have the desire to build a website from scratch again, that is fast receeding but never say never. If the right project and budget came along maybe but I've done what I need to do,  you tend to get pigeon-holed into a certain sector which can become quite boring as the challenges become less and the motivation gets less, as time goes by.

       

      Too much dependency on others code, libraries, frameworks, templates, etc) CAN NEVER EVER be gratifying to me, that's just not what I signed up to be or do - a painting by numbers zombie. That I put down to being a 'creative at heart' which I guess a lot of developers do not suffer.

      O
      osgood_
      Legend
      March 21, 2021
      quote

      Why is it not 3 across for the header and 1 each for menu, main, right etc?

       

      If it was 3 across that would give you 3 columns and if you have grid areas set up like below:

      'header header header'

      'menu main right'

      'menu footer footer'

       

      then 'menu main right'  columns would be equal in width, which in most cases you would NOT want. You would want the 'main' column to be wider than 'menu and right' column.

       

      By using 6 columns it's more flexible, you can specify how many columns you wish for the 'menu main right' to occupy.

       

      menu = 1/6

      main = 3/6

      right = 2/6

       

      Effectively if look at the columns as percentages:

       

      16.6% - 50% - 33.3% = 100%......... well 99.9%

       

      Grid can be a bit tricky to grasp initially but you will eventually get a better understanding of how it works.

       

      Personally I haven't yet worked out which is the best option - grid areas or just specifying the grid columns as specific widths, then delcaring how many columns/rows each div occupies in the divs css selector itself. Have a bit of a practice and be open to each workflow, both will probably come in useful.

        BenPleysier
        Community Expert
        BenPleysierCommunity Expert
        Community Expert
        March 21, 2021

        What @osgood_  is trying to say: if you use 12 columns, you will have the Bootstrap grid. So why not use Bootstrap and save yourself a lot of time.

         

        https://getbootstrap.com/

        Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
          O
          osgood_
          Legend
          March 21, 2021
          quote

          What @osgood_  is trying to say: if you use 12 columns, you will have the Bootstrap grid. So why not use Bootstrap and save yourself a lot of time

           

          No, thats not what lm implying at all. Grid allows you to create streamlined simple responsive code, whereas Bootstrap is full of redundant html, the more Bootstrap you use the more bloated your code becomes, completely unecessary. It is also not current when it comes to modern techniques such as ccs grid as there is no such option in Bootstrap.

           

          I wouldnt dream of suggesting the use of Bootstrap as a professional workflow option if you have any pride in what you produce.

           

          Grid is much more flexible if executed correctly. Its part of the tools now for modern and forward thinking web developers, those that want to stay one step ahead. Bootstrap might catch up in a couple of years.

          B i r n o u
          B i r n o u
          Legend
          March 21, 2021

          to complete what already said Ben, you can have a look at https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

           

          BenPleysier
          Community Expert
          BenPleysierCommunity Expert
          Community Expert
          March 21, 2021

          Why don't you try it and view the difference.

           

          Hint: space taken up by the different items.

          Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices