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>

Tags:

Html

Css