Understanding CSS Grid Systems from the Ground Up

I think there is no prescribed way to learning a subject. Who cares how you came to learn something, as long as you did learn something.

3 Likes

Because you don’t want to learn how they did it, but why they did it this way.

Why? Are there studies showing the best way to learn something? Or is this purely your opinion based off no sound facts or information that can be proven.

I constantly see people come in here who know certain parts of CSS but not others. Do I agree with that? Doesn’t matter to me. I see those same people come back here months or years later and they all are great developers now.

I look at it in terms of exposure. I read something and maybe I see something I’ve never seen before. From there I do my research to learn about it. But if not for that first article, I would not have been exposed to it. The only thing worse that not knowing something is not knowing about what you don’t know. I view anything that exposes me to something new as beneficial, now matter how I got there.

I largely taught myself JavaScript by looking at various libraries and frameworks that would employ advanced design patterns that were way over my head. I can still vividly remember the day I first learned about the call and apply methods of functions simply looking through the source code of ExtJS. Did I learn anything from ExtJS about call and apply… no, but it did expose me to them.

This doesn’t apply to all program languages? The need of knowing why they do it in a way, and not how they do it? I’ve seen to much copy cats and programmers who do a trick over and over but have no idea what they are doing. This can lead to very odd situations where somebody with knowledge can’t understand what is happening.

And sure, it is my personal opinion. But it is an opinion based on years of experience working in big and small teams for big and small businesses. My opinion is that you can explain every rule of code you write, otherwise you shouldn’t write them at all…

Everyone comes to the first day of a new subject on a different day, we are not already born with the knowledge of CSS Frameworks or Grid layouts (perhaps we should be) what I find interesting is how similar a css GRID is to the good old days of tables… table, tr, td etc… might have to change container, row and column just for old times… and find my faithful friend the 1 pixel transparent gif :stuck_out_tongue_winking_eye:

Speaking of tables… I’m a beginner, so no laughing. I can follow what is going on with the html and css of this article. I was wondering. What if one of the columns is used as a label on a form? I don’t want the label in a “box” like the other columns. How would you differentiate the two columns?

Let me see if I am understanding you correctly, you want to make a <label> element one column and another column that contains a field of some sort for a form? If so, you can make the label element itself a column by adding the appropriate classes. I’m not sure what you mean by differentiate the two columns? You can add a unique id or class name to target a specific column in JavaScript and CSS.

Not by a long shot actually. The biggest problem with CSS grid systems is they push layout rules back into the HTML where it doesn’t belong. CSS was developed to get styling markup out of the HTML, putting it back in via classes is a bit wrong headed. But then there’s the pragmatic side of the coin - it does save a lot of time despite not being ideal.

Also, note the following:

div:after

is wrong. it’s

div::after

The single colon implementation works on IE 8 and the other browsers tolerate it, but the markup is incorrect all the same. Also, floating things around is far less useful than using a proper flexbox model. IE 9 and 10 have a smaller market share than 8 in many areas, so skipping them as well is becoming an option thank goodness.

Hi, See the website http://www.localjobpool.com
I would like to hide the green top bar in mobi
le view.
Staring code of div tag is:

<div id="info">
<div class="menuHolder">
<ul class="nav">
....
....
</div>

menuHolder and nav are defined in my custom CSS. I tried the solution like
@media screen......

like 

@media screen and (max-width: 500px) {
.info .menuHolder .nav {
display: none
}

}

Please tell me how I can hide this bar in mobile view. And where should I insert the code suggested by you…

LOok at your div id="info element. Then look how you are calling it in your CSS.

.info .menuHolder .nav

First off, great article. As for the “CSS in a weekend” comment: learning the correct syntax for a language and knowing how to make it sing are two different things. You can learn the correct syntax for CSS, but that doesn’t mean you know it. I’ve been playing around with it for a decade and am STILL fascinated by the things people do with it. As a backend/DB dev by trade and someone who is fluent in over a dozen different development languages and APIs, I can say that creating with CSS is by far the most personally satisfying work I do, as well as the most challenging. It isn’t anything any code geek should be looking down their nose at.

4 Likes

Great article, thanks for this :smile:

As for the comment about css being so easy to learn that it can be done over a weekend, it really depends what do you mean by ‘learning’. If you mean to be able to do something with it, sure, you can even create your first layout just after having studying css for a few hours.

Now, how about making it cross-browser compatible and responsives ?
How about smart layout that adapt to the content, and doesn’t break as soon as the content is not exactly ‘ideal’ for your layout ?
How about knowing exactly how to combine the different properties ?
Does width: 0 auto works to center horizontally a div without a fixed width ?
How does percentage actually work ? it’s a percentage of what ?
How does background-position work ? does background-position: 25% 25% means the left and top edges of the image will start at 25% of the left and top edge of the div ? No it doesn’t.

Knowing the details and how to combine css properties take time and is definetly not learned over a weekend.

Trick question; width:0 auto; is invalid (you meant margin :wink: ) and also what’s the display type for the div :wink: .

It depends on your point of view.:slight_smile:

It’s perfectly valid in CSS 2.1 when used on the elements available in the css2.1 specs: namely, :first-line, :first-letter, :before and :after. If you are supporting IE8 then you must use the single colon syntax for the above elements.

If you use css3 the new pseudo elements (that weren’t available in CSS2.1) then you should use the double colon syntax.

From the specs:

For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after).

Millions of pages were written using :after long before ::after came into being and they don’t all suddenly become invalid :smile:

Useless pedantry. By the time IE 8 was built everyone else had already moved to the :: syntax. So at this point it’s a way to reliably shut out Microsoft’s crappy browser. No one has ever used :after or :before to insure it will continue to work on any browser but IE 8.

I beg your pardon? I take exception to that.

I was merely pointing out that :after is perfectly valid css 2.1 and there is no reason to use ::after as long as you are supporting IE8 (which quite a lot of us still do). Telling people to use the double colon syntax on CSS 2.1 pseudo elements will cause those pages to break in IE8 which is why I chimed in as you are not the first to recommend this.

The html5 boilerplate and bootstrap3 all use the single colon syntax for :after and :before and I recommend that everyone continues to use this format for a couple of more years at least.

Nice catch, you are right I meant ‘margin’ and not ‘width’ :smile:

About the display type, I was supposing a display: block;

Meh, the sooner IE 8 dies the better. And I’m not above putting in things I know will break in IE 8 these days when I’m allowed to.

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