I’m creating a site, similar to this site.
Layout is exactly the same. I’ve always used float before and for some reason, I don’t want to use them anymore.
Did some research and stumbled upon flexbox, which I think is great and is easier to manage than float.
So, just today, I heard about CSS Grid and it looks promising.
I’d like to know which would be better to use. I’m still in the experimenting stage so I’d like to try a few other options.
I’m also still learning about flexbox so it wouldn’t really make a difference if I switch to CSS Grid and try to learn it.
Besides, I still have time (I think).
Grid is good and may be the future of web layouts, but it still lacks some support.
You may find the discussion in this topic helpful in your decision.
I would agree it’s time to drop floats for general page layout (though it does still have its uses for some page elements) but flex and grid are not the only options for you.
Oh, totally missed display: table. The blogs I’ve read only mentioned flexbox and CSS grid.
I actually thought it’s similar to the table tag lmao.
I’ll look into it more. Thank you!
It makes any html elements behave like a table elements. This allows you to emulate a table-like grid layout, but using the proper semantic elements to do it.
That’s been my favourite layout mechanism for the last 10 years or so I’ve created hundreds of sites using it and its very robust especially when you hand your code over to the client.
A lot of ‘so-called’ experts live in a bit of a bubble and only work on one project or their own project and often miss what works in the real world.
These days I’m starting to use flex more and more and would use grid where I can often reliable fallbacks. However, I don’t see the point in using something more complicated just because its new when something tried and tested still does the job nicely. Horses for courses springs to mind:)
Oh, I see. We were never taught that in my uni. Well, they taught us the basics of html and css but their method is somewhat old or something
.
Used float and position in the overall layout. It worked okay because they never really tried making it responsive. Last lesson I attended there, before I quit uni was about html tables and I thought it was messy so I’m kind of indifferent towards tables and was like, “Okay. Not going to use tables, ever.”
Now, I’m working and realized that there’s so much more to learn, and they don’t teach that in schools. And there are different ways to implement a design, to solve problems.
I just use google whenever there’s something I don’t understand. Read blogs and articles, but can be confusing sometimes because of other developers’ bias. Like one developer would say, “This is better than that.” and another developer would say the exact opposite. I know it varies on a case by case basis, but there are times that I don’t know where and how to start because of my very limited coding knowledge, having trouble identifying which works best for which.
Not sure if I’m making sense, but yeah @SamA74 and @PaulOB, thank you so much for the ideas! Appreciate it a lot.
Lets be 100% clear here and we are talking about the CSS display:table property and not the html table element.
The css display:table properties infer no semantics on a layout and you can use them to create similar layouts that the html table elements can do (apart from rowspan or colspan) without injuring the semantics of the page.
The html table element on the other hand should only be used for ‘tabular data’ and not for general layout purposes. Indeed it is incorrect semantically to use divs and the css display:table properties to lay out tabular data. You should use the table element for this (and whatever css you like).
Just remember that html has a job to do that is clearly defined so first and foremost you use the right semantic tag for the job in hand and then use as much css as you need. Html is the structure and CSS is the presentation
I’ve created hundreds of sites using it and its very robust especially when you hand your code over to the client.