CSS Grid


Nathan C

New Member
CSS Grid Layout, I am currently learning about it and it seems great! The agency I work in build using bootstrap which I have come to hear is quite dated.

CSS Grid Layout seems like it might be a worthy next step.

What's everyone's opinions on CSS Grid Layout?
 

fisicx

Active Member
Depends on your users:


Don't try and build the whole site using grid. Use it for the components that need to be in a grid. If you are developing using a 'mobile first' approach you shouldn't need much more than a vertical layout. Bin the sidebars and horizontal rows, they are a things of the past along with bootstrap.

Floats and media queries are still very powerful, don't overlook them in creating layouts.
 
Depends on your users:


Don't try and build the whole site using grid. Use it for the components that need to be in a grid. If you are developing using a 'mobile first' approach you shouldn't need much more than a vertical layout. Bin the sidebars and horizontal rows, they are a things of the past along with bootstrap.

Floats and media queries are still very powerful, don't overlook them in creating layouts.
Fisicx is right you should look at mobile-first as an ever-increasing number of users are view via mobile and tablet first on websites. I see far too many sites looking the same due to bootstrap, think about what the users need to do on the site and how they will get around, what they need to see.

media queries are a good way to ensure you have the right fit for the screen, just research the breakpoints.

a good way of learning basics for grids and any learning is w3schools https://www.w3schools.com/css/css_grid_item.asp

always design and build with what the end-user will need to achieve, because if the site does not work right for them, they will not use it.
 

Paul Murray

Moderator
Staff member
I've started using Bulma as my framework, I never used Bootstrap so I can't compare. It uses flexbox for layout and is pretty easy to add/remove the elements and components you need. It's not 100% perfect and I still find myself writing custom CSS but I think that's the case with any framework.
 
I've started using Bulma as my framework, I never used Bootstrap so I can't compare. It uses flexbox for layout and is pretty easy to add/remove the elements and components you need. It's not 100% perfect and I still find myself writing custom CSS but I think that's the case with any framework.
Looks good, flexbox can be tricky to work with at times but it's useable, https://www.w3schools.com/css/css3_flexbox.asp
I have found that if it is what works for the job and the client's requirements that is what we need to use.
 

fisicx

Active Member
One of the problem with using flexbox (and frameworks in general) is the DOM. You often end up with excessive DOM elements (something Google doesn't like) and stacked CSS classes.

Run a few tests on bulma.io and you will see it doesn't score well.

And it's poorly responsive - the UI on small screens isn't good.

And flexbox should be used with other tools rather than the only tool. For example Grid might be better for some elements and Floats still work really well.
 

Paul Murray

Moderator
Staff member
One of the problem with using flexbox (and frameworks in general) is the DOM. You often end up with excessive DOM elements (something Google doesn't like) and stacked CSS classes.
Yeah that's one of the annoyances I have, it's often div inside divs to get the desired effect. I'm mainly using it because it's quick to work with, which for what I'm working on right now is fine. Being able to tweak it through Sass variables is handy, though there's still a few bits that are lacking. It's also actively maintained. I've tried a fair few frameworks for layouts which start off strong but quickly fall behind on updates and become defunct. Any recommendations for a framework? I mainly just want layouts, columns, etc. I prefer to style all other elements myself as needed but having defaults I can change would be handy.
 

fisicx

Active Member
I don't use any sort of framework.

I've binned columns - because people use phones and tablets.
I don't use sidebars because people use phones and tablets.
I don't use sliders and carousels - because people use phones and tablets.

I use css grids for grids (product list etc) but for everything else I keep everything in a single column - because people swipe up all the time, they don't look left to right, even on desktops.
 
Yeah that's one of the annoyances I have, it's often div inside divs to get the desired effect. I'm mainly using it because it's quick to work with, which for what I'm working on right now is fine. Being able to tweak it through Sass variables is handy, though there's still a few bits that are lacking. It's also actively maintained. I've tried a fair few frameworks for layouts which start off strong but quickly fall behind on updates and become defunct. Any recommendations for a framework? I mainly just want layouts, columns, etc. I prefer to style all other elements myself as needed but having defaults I can change would be handy.
Have you ever used W3.css by W3schools, I have used it a couple of times and found it quick and easy to use https://www.w3schools.com/w3css/default.asp
 
I haven't, W3Schools used to be sh*t and full of misinformation. I think it's improved in recent times, but I'd still be reluctant to use anything they created in production. I'll check it out though.
I know what you mean there was a time it was not the best, with the framework being very light its improved, just HTML and CSS.
 

fisicx

Active Member
Most of the w3school’s ‘framework’ isn’t anything of the sort. and there’s huge chunks of code missing.
 
Top