1 Correct answer
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 specific
...
14
Replies
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.
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.
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?
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.
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.
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.
AdChoices