CSS Language Speak: Container vs Wrapper?
I like to throw in something here:
With current CSS standards and best practices, usually you have a container element that has the display: grid
property. This div
contains all the columns
and rows
of the layout. It also has a viewport wide background
color, border
and shadow
. These properties are displayed using the entire width of the browser.
Now you need to add the content. You have to create another div, this a max-width: 1256px
and now you give the margin: 0 auto
and width: 100%
.
So the structure will be:
<section class="container">
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</section>
This breaks the previous answer's logic of a container
having many elements and a wrapper
just one, but I've found this approach to be effective when building sections that have specific separate styling from other sections like shadows and borders.
Therefore, in some situations:
A container
is for styling the entire width of a section. A wrapper
is for styling and centering the max-width
content inside it.
There is no difference between them.
It's just what you like to call the <div>
that, often, contains all content of a page
According to this answer:
In programming languages the word container is generally used for structures that can contain more than one element.
A wrapper instead is something that wraps around a single object to provide more functionalities and interfaces to it.
This definition matches with meaning of words and it's useful for HTML structures like:
<ul class="items-container">
<li class="item-wrapper">
<div class="item">...</div>
</li>
<li class="item-wrapper">
<div class="item">...</div>
</li>
<li class="item-wrapper">
<div class="item">...</div>
</li>
<li class="item-wrapper">
<div class="item">...</div>
</li>
<li class="item-wrapper">
<div class="item">...</div>
</li>
</ul>