Difference between a div, a container and a row?

Beginners
1

Happy New Year to all of you :smiley:,
luckily I got started with pinegrow in a more serious way and managed quite good how to use CSS GRID for example and like it so far very much. As some of you may have seen in another post, I also managed how to add my own images, I got the structure of “how” pinegrow kind of works, which might not be for pinegrow only, I guess.
I am asking for someone, to shed some light into this: is there a technical difference between a ROW, a DIV and a CONTAINER? When to use what? I realize when using plain html, that a row is also called “div.row” in the tree (page structure). I also realize when using “bootstrap” instead of “plain html”, the dimensions are quite different although the css-grid is built the same way as in the “plain html” page.
If I understand it right, “div” is the overall definition of them all? Because it is also named “div.container”. Is this correct?
Thanks in advance and Kind Regards,
Uwe

2

bootstrap does a lot of things to try and emulate how CSS GRID works, but it is not the same thing.

using CSS GRID within the bootstrap framework is perfectly possible but then there is a lot of bootstrap that you should no longer be using to avoid strange behaviors.

i use pinegrow to do all my CSS GRID in plain html specifically to avoid getting confused about how CSS GRID works.

the biggest limitation of CSS GRID right now is that you can’t reach into a div or other container to position things inside of it… you can only position the elements that are direct children of the container element where the grid is applied.

so, until the subgrid spec is adopted, we have to use flex or just inlineblock display to work with those and there is no way to line them up with the parent grid.

bootstrap may handle this better for now.

3

In Bootstrap, the Container is the top level element in the Bootstrap grid system which is used to “contain” the children, the rows and columns (and within the columns your content, text, images, etc.) Containers set the width of the grid, and affect all the child elements within them.

In Bootstrap, a div can be a container, a row, a column, or pretty much anything else. A div simply means a “division” in the code, basically a way of sectioning out blocks of HTML saying something starts here <div> and ends here </div>. Essentially everything on a webpage is a div, and when you assign the <div> a particular class it takes on the CSS attributes of that class. So in Bootstrap, giving a div a class of “.container” would make that div behave like a Bootstrap Container component. Giving it a class of “.container-fluid” would make the container stretch the entire width of the viewport, and so on.

So a typical piece of HTML code to describe a Bootstrap grid might look like this…

<div class="container">
        <div class="row">
            <div class="col">
                <p class="text-center">Welcome to my website</p>
            </div>
        </div>
</div>

Regardless of whether you use CSS grid or Bootstrap or Foundation or some other framework, in this day and age, sites need to be responsive, so that’s why different frameworks have different ways of organizing their grid system. Bootstrap, for examples, uses CSS Flexbox. You can also use CSS Grid in combination with Bootstrap’s grid system, although I think that would get rather confusing. But CSS Grid and CSS Flexbox work fine together in plain HTML sites.

2 Likes
4

Hi droidgoo, Hi Printninja,
thanks for your replies.

Blockquote

the biggest limitation of CSS GRID right now is that you can’t reach into a div or other container to position things inside of it… - isn´t that possible to use an additional grid inside of a container?
Is this the subgrid you mentioned?

Thx Printninja, my main question about definition of “div-row-container” is answered perfectly.

Combining both answers, it is recommended to use either bootstrap or css grid, did I get this right?

I keep watching both bootstrap and CSS-Grid for its responsive behaviors. I got (at least I guess so) that I have to take care of media queries in CSS Grid. Not sure if Bootstrap does it the way I got used to, using Adobe Muse, where one was able to either use fluid width breakpoints or fixed width breakpoints but this is by far another question and I will open up a new question if necessary.

As of this reading I am aware of some definitions and the following fits to this topic for my belongings:

A “modal” behaves like a “lightbox” / is the html-definition of a “lightbox”?

To answer in advance, why I ask this - I want to use a fullscreen menu instead of the “regular” navbar on top. I found out, how to use a modal so I am pretty optimistic about that. I am trying to style the “lightbox”/the opened modal but that one takes some more detection, though.

Thanks for replies and thanks in advance for following answers,
Uwe

5

yes, you can… but it’s an entirely new grid with no awareness of the grid which contains it

the subgrid element will allow you to treat elements below the first child as tho they are placed on the main grid.

this does a fair job of explaining it, or you can click thru to rachel’s article (she’s the guru)

6

I just watched the CSS-Grid tutorial several times and MatjaĹž mentioned that it is possible to use an additional CSS-Grid in another CSS Grid with no problem. I will watch the CSS Guru-tutorial as well, of course. THX and Kind Regards,
Uwe

7

What you choose to use (Framework, Bootstrap, plain HTML5, etc) really depends on what you’re trying to accomplish. I build and maintain many sites a month. For me, using Bootstrap exclusively means one system, where everything works the same, and I only have to memorize one set of helper classes to get a lot done in a short period of time. There’s a reason Bootstrap is the world’s most popular framework. It’s very versatile and just gets the job done. That’s what it’s all about to me… getting the job done, getting paid, and moving on to the next job. I haven’t played at all with CSS Grid because I’ve yet to encounter a need for it. Bootstrap has been able to do everything I’ve needed without any real problems. Bootstrap has preset breakpoints (1200, 992, 768, 576 and 360) but you can change these or make your own custom ones easily enough. Bootstrap also has a “fluid class” which enables containers to behave as though they are “liquid.”

The Bootstrap Modal is basically what you’re calling a Lightbox. It’s just a div above the main page’s content that dims the main page through the use of opacity, and then shifts the focus to the div on the top (higher z-index.) You can use modals for all sorts of things, including navigation if you’re so inclined. There are tons of bootstrap navigation components that may already do the thing you want on the website https://bootsnipp.com/ so you might want to check out if something already exists that you could use, rather than struggling to write custom code.

4 Likes
8

Hi Printninja,
much thanks to your reply. I must admit not to have properly tested Bootstrap and its breakpoints/responsiveness until today. Coming from Muse with just kind of drawing elements like in InD, I thought it might be a good idea on keeping it as basic as possible to get to known to sort of html a little deeper. I try my very best to check it out.
Kind Regards,
Uwe

9

If you’re coming from Muse, then you’re obviously dealing with a lot of new stuff you’ve never had to face before. Muse was a novel idea on Adobe’s part, but it failed horribly when responsive design became the defacto standard in web design. When Adobe tried to make Muse sites responsive, the code that was produced was absolutely terrible. I think (thankfully) they quickly realized they were filling the web with horrible websites that nobody could edit outside of Muse, so they (wisely) shut the whole project down. The speed and efficiency of the web (and the entire web design industry for that matter) is based on us having websites that contain clean, semantic code that adheres to best practices, and Muse was doing the exact opposite.

By jumping from Muse into Pinegrow, unless you’ve got prior coding experience, you’ve got a lot of work ahead of you. Pinegrow is a “visual” website builder/editor, but it really is nothing at all like Muse. Having to build a website with containers, rows, grids, columns, etc may seem restrictive compared to Muse which just let you draw and place things wherever you wanted, but that’s the trade-off in responsive design.

Older websites that used static positioning were in a sense, much easier to build, because you didn’t have worry about things moving around. But with an endless number of devices and screen sizes out there, there’s no getting around the fact that websites have to “move around”, adapt, resize, etc, and that’s why breakpoint type systems like CSS flexbox and CSS Grid were invented.

Bootstrap is a framework that uses CSS flexbox. And while it may seem to make more sense to start with plain HTML for your first site, you may actually find it easier to start with a framework like Bootstrap. The reason is because Bootstrap IS HTML and CSS. It’s just that the rules have simply been arranged into pre-named “classes” that allow you to do routine, repetitive things more quickly. Frameworks were created to make web design EASIER, but whether you use one or not, there’s no getting around the hard part which is learned how HTML and CSS work together in the first place to create a website.

You would greatly benefit from taking a few basic courses in HTML and CSS fundamentals before you start trying to learn how to build a site in Pinegrow. Everything will make a lot more sense once you understand what things like “class”, “ID”, “rule”, “tag”, “div”, “style” and dozens of other terms mean.

I kind of did things backwards. I started out using a visual builder called Website Realizer (which at the time built purely static sites through a drag-n-drop style interface) but also allowed you complete access to the HTML and CSS, so when I’d encounter something I wanted to do that wasn’t “built into” the program, I was forced to go on the web and research it. So I slowly, painfully, taught myself CSS and HTML (in that order) without ever learning how to actually build a site via code. To this day, even though I now know how, I’ve never build an entire website simply by typing code into an editor. But the learning process I went through before I got Pinegrow made using Pinegrow at lot easier. Everything made more sense because I actually understood what the code meant.

There are other programs out there that are not quite as “daunting” to beginners as Pinegrow which will allow you to build responsive sites visually, but even they benefit from you having that underlying understanding of code.

I would recommend taking a look at https://www.w3schools.com/ which has numerous, straightforward tutorials that can make it easier to understand website coding. I still refer to their site on occasion when I have a "senior moment’ and forget how a particular CSS rule works.

2 Likes