CSS Grids?

I’ve only briefly gone over this but this basically just seems like a different way to write code vs regular CSS say using only div ids, and classes, so at what point does this become useful for arranging information without a CMS, or Database being a necessity? When someone creates a div class like div class=container, you can then place 3 inline elements horizontally inside of a sub container spanning the width of the container, and then 2 elements underneath, and then 3, etc.? What sort of site structures are people viewing this as useful for, as a time saver or necessity?

mrivera,

Have you completed a modern course in HTML and CSS? If not, I strongly encourage you to do so. Not only will you learn the answers to many of your immediate questions, you will also learn the rationale behind those answers and thereby be able to apply the techniques to other situations such as frameworks and some “fast” web appliances. No matter which appliance or framework one chooses to “speed up” his web design work, there is invariably a desire to modify it which requires a working knowledge of HTML and CSS. Start with a strong foundation of HTML and CSS plus Javascript, THEN grow intelligently from there. You will also be able to make an informed decision about which frameworks or HTML techniques are best suited to your web objectives. Speed comes from experience. Shortchange yourself by glossing over the basics and you will suffer in the long run as will your clients.

Click the magnifying glass at the top of this page and search for “css grid” to find many previous discussions about your current question.

Yes I’ve coded a few websites using HTML, and CSS, and written Javascript functions. I’ve also edited CMS’s before. I don’t think you really understood what I was trying to ask. Forget that I mentioned a CMS. Let’s take an example of a simple small business website with a few nav links, and no Wordpress, or other CMS. Let’s say this website has a home, about, services, gallery, and contact section. This website has to be responsive on all browsers. Structurally what layouts would you say could be written faster, or obstacles do you feel could be overcome using a CSS Grid? Any issues, alignment on different browsers without Javascript, anything that comes to mind?

I’m not experienced enough with css grid to answer your question confidently. However, from reading many of @PaulOB’s recent posts, he advises most users that css grid is not fully supported across all browsers. Some browsers have issues implementing certain css features.

caniuse is a well-maintained resource describing current browser behaviors and misbehaviors by version.
https://caniuse.com/#search=grid (read down the page)

Again, you can search SitePoint for “css grid” and read the discussions for yourself.

1 Like

I think it helps to think of CSS grids as being much like HTML tables. Web developers consider use of CSS to keep the style separate to be better than the pure HTML technique of keeping entire objects together. For simple tables/grids there is not much difference. Learning CSS grids, compared to HTML tables, is good for learning the techniques that other web developers get emotional about.

Let me put things into context. A true object-oriented system would do everything that HTML, CSS and JavaScript do except all in one consistent language and location. We do not have that for the web. A CMS is close in that they typically package all the components together into a plugin or whatever the CMS calls the pieces. A CMS typically provides a standard way for developers to package an object into something that non-technical people can use. A CMS is high-level and HTML and CSS are low-level.

I do not understand how databases are relevant.

Support is pretty good these days if you don’t count IE.

However I don’t see the point in using grid unless the layout you want is better suited to grid. Grid comes with a lot of complexity and it’s easy to make a mess of it and have a site that is almost impossible to maintain. Debugging and altering a grid design is a complex job and not for the faint-hearted.

Learn basic CSS first and then learn to use flexbox and grid afterwards.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.