Grid layout basics explained

Contributor ,
Mar 20, 2021 Mar 20, 2021

Copy link to clipboard

Copied

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

Views

321

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Mar 21, 2021 Mar 21, 2021
HelloThanks 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 spec...

Likes

Translate

Translate
Adobe Community Professional ,
Mar 20, 2021 Mar 20, 2021

Copy link to clipboard

Copied

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

 

Hint: space taken up by the different items.

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

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, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

I agree with @BenPleysier.  Millions of sites worldwide are using frameworks like Bootstrap for a reason.  Coding responsive layouts manually is tedious.  Don't get me wrong, everyone who builds websites needs to understand the concepts.  But frameworks like Bootstrap are such a huge time saver, it's almost impossible to rationalize NOT using them.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

If you would have asked me two years ago, I would have answered "yeah, just use Bootstrap, Foundation, or some other grid framework. Not worth the extra effort". 

 

I don't anymore, because creating a good solid responsive grid with grid css is so simple, and so effective, that I no longer rely on any of those for my layouts (well, unless a client would ask me to be super-compatible with legacy browsers...).

 

Do I still use frameworks and libraries for GUI stuff? Yes, certainly. For responsive layouts? No. I moved away from grid frameworks in the past 1~1.5 year. Grid css has replaced those for me.

 

Bootstrap, Foundation, etcetera still have their place, definitely. I just don't see the use anymore for a responsive layout. In particular when it takes a few hours to write a good solid grid-based responsive base code, which is reusable for almost any project. And I have full control over class naming schemes (never liked Bootstrap or Foundation in this regard).

 

So I concur with @osgood_ (but do appreciate the alternative legacy Bootstrap approach too, of course).

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

quote

If you would have asked me two years ago, I would have answered "yeah, just use Bootstrap, Foundation, or some other grid framework.

 

I don't anymore, because creating a good solid responsive grid with grid css is so simple, and so effective

 

Do I still use frameworks and libraries for GUI stuff? Yes


By @rayek.elfin

 

This makes me wonder. Using @osgood_ 's definition, your are half way between an Amateur and a Professional. What do we call that, an Amafessional or a Proteur?

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

quote

I agree with @BenPleysier.  Millions of sites worldwide are using frameworks like Bootstrap for a reason. 

 

 

Millions = amatuers. They have a reason to use frameworks such as Bootstrap. Professional developers have zero reason to rely on such workflows, especially when it makes them poorer developers and that's a lot of so called 'profesional' developers who don't know how to structure a website correctly as a result of too much dependancy on frameworks and automation.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

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";

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

Thanks. I thought regular css was aggravating   : )

Grid and Flex will take that up a notch for me.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 23, 2021 Mar 23, 2021

Copy link to clipboard

Copied

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)

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 23, 2021 Mar 23, 2021

Copy link to clipboard

Copied

LATEST
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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines