Author: Ahmad Shaded by SitePoint

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

In the layout, the DOM structure of each function is usually wrapped with a Wrapper element to make the code or web content easier to read. To do this, we typically use wrappers or containers. There are many ways to use wrappers in CSS, and some of these ways can cause problems.

In this article, you’ll look at wrapper layouts in CSS, how they work, how to use them, and when not to use them. Note that in this article, the terms Wrapper and container may be mentioned, which have the same meaning.

Introduction of wrapper

When we talk about wrapper or container, we really mean that a group of elements is wrapped or contained within another element. We can add a Wrapper class to the element so that we don’t need additional elements, as follows:

body {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}
Copy the code

However, adding a Wrapper to a element is impractical. The Wrapper element prevents children from going beyond their boundaries. Consider the following:

We have the aside and main elements here, which are inside the Wrapper element. Of course, the.wrapper element has a width.

<div class="wrapper"> <aside>... </aside> <main>... </main> </div>Copy the code

Without a Wrapper, child elements stick to the edge of the screen. This can be very annoying to users, especially on the big screen.

The figure above shows how elements unfold without a wrapper, and users should not experience this behavior. Let’s explain why.

Why is wrappers on pages necessary

By adding an additional wrapper layout, there are many benefits:

  1. Make the content more readable. Without an extra wrapper, content like text and images can be stretched to take up the entire screen width. For small screens, this seems ok. However, with large screens, this is very annoying.

  2. Grouping design elements provides better spacing.

  3. Partitioning design elements into columns is not easy to do without wrappers.

Implemented in CSSwrapper

Now that we’ve seen the wrapper basics and benefits, let’s look at how it can be used in CSS.

Set the width

The first thing you need to do to implement the Wrapper is verify its width. And the width depends on the design of the UI. Generally speaking, the most commonly used width is 1000px to 1300px. For example, the popular framework Bootstrap uses a width of 1170px.

.wrapper {
    width: 1170px;
}
Copy the code

However, using the width property is not recommended because horizontal scrolling occurs when the screen size is less than 1170 pixels. You can use max-width to solve this problem.

.wrapper {
    width: 1170px;
    max-width: 100%;
}
Copy the code

We can also make it simpler and just use max-width.

.wrapper {
    max-width: 1170px;
}
Copy the code

Now that we have the width, we can center it.

Center of the wrapper

To center the Wrapper, use the left and right margins as auto, as shown below:

.wrapper {
    max-width: 1170px;
    margin: 0 auto;
}
Copy the code

Margin: 0 auto; The working principle of

If ‘margin-left’ and ‘margin-right’ are both ‘auto’, they are used equally. This centers the element horizontally with respect to the edge of the containing block.

Here I use margin:0 auto, which basically resets the top and bottom margins to zero and makes them auto to the left and right. There are consequences to using this feature, which are described later in this article. For now, it is recommended to use simplified margins:

.wrapper {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}
Copy the code

Add padding on the left and right

The important thing to consider is adding padding on the left and right. When the viewport size is smaller than the maximum width of the Wrapper, this causes the wrapper edge to stick to the viewport.

.wrapper {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}
Copy the code

By adding padding, we can ensure that we get an offset of 16px from the left and right, even if the viewport size is smaller than the maximum width. Padding is used as a protection strategy to prevent the Wrapper from sticking to the edge of the viewport when the width is insufficient.

percentage-usingwrapper

I received a response about using percentage widths (e.g. Max-width: 90%) for wrappers instead of using padding-left and padding-right.

I can often use percentage widths directly in ‘wrapper’, such as max-width: 90%. Instead of using padding-left and padding-right.

On a large screen, 90% width is too large, and we can overlay it with media queries.

.wrapper { max-width: 90%; margin-left: auto; margin-right: auto; } /* A media query for a large screen */ @media (min-width: 1170px) { .wrapper { max-width: 1170px; }}Copy the code

Using the percentage width, we added an extra step. We can easily avoid this step by using a fixed width value. For this scenario, we can combine width: 90% with the max-width: 1170px attribute.

.wrapper {
	width: 90%;
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
}
Copy the code

This is an interesting approach, but I prefer to add the padding myself rather than rely on the percentage width.

The Wrapperdisplaytype

Since the Wrapper is

, it is a block-level element by default. The question is, what do you do when you want to place the contents of the wrapper in the grid? We add display: grid? Directly to the wrapper.

I don’t recommend doing this because it runs counter to the concept of separation of concerns. The Wrapper is used to wrap its contents and nothing more. If you need to use grid layouts, it’s easier, cleaner, and easier to maintain to add an extra layer of

just for grid layouts. 
<div class="wrapper"> <! -- Content --> </div>Copy the code

This is not recommended because the Wrapper element can be used on another page, which can inadvertently break the layout.

.wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 16px;
}
Copy the code

A better solution is as follows:

<div class="wrapper"> <div class="featured-news"> <! -- Elements that needs to be placed in a grid --> </div> </div>Copy the code
.featured-news {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 16px;
}
Copy the code

Add margins between wrappers

We mentioned above that it is not recommended to use abbreviated versions to center the Wrapper element:

.wrapper { 
    margin: 0 auto;
}
Copy the code

While it works, it can be confusing when there are multiple wrappers on a page and you need to add spacing between them. Due to the layout, we need to add an extra class to wrapper, such as Wrapper-variation, so margin may not work properly.

.wrapper-variation {
    margin-top: 50px;
}

.wrapper { 
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}
Copy the code

Margin of the.wrapper-variation element cannot be used because it is covered by margin: 0 auto. To avoid such confusion, it is recommended to use a non-shorthand format in this case.

Now let’s add margins. In each project, I prepare a set of utility classes for margin and padding, and use them when necessary. Consider the following figure.

<div class="wrapper mb-5"></div>
<section>
    <div class="wrapper"></div>
</section>
<div class="wrapper"></div>
Copy the code
.mb-5 { margin-bottom: 3rem ! important; }Copy the code

Thus, the WRAPPER CSS remains intact and the spacing is added using additional CSS classes. Now, you might ask, why is it possible to add multiple wrappers to a page? In the HTML above, there is a

element between two wrappers.

Use it here! Important is good because the point of utility classes is to enforce properties by adding! Important, we can make sure of that.

Wrapper in full screen

In some cases, this can happen if the background viewport of a section is 100% wide and contains wrapper ‘. Similar to what was introduced in the previous example.

<section>
    <div class="wrapper"></div>
</section>
<section>
    <div class="wrapper"></div>
</section>
Copy the code

The width of

is 100%. We can add a background color or an image to it. Among other things, the Wrapper prevents content from occupying the entire width of the viewport.

Does the main content need a Wrapper?

It depends. Let’s look at the design of the two most commonly used content sections.

The first is centered on its content and is limited by a specific width.

The second extends its content to the edge of the main content.

To better understand these two patterns, let’s explore how to build each of them.

Center content

You may want to center the content without using wrapper.

<section class="hero"> <h2>How to make bread at home</h2> <p>.... </p> <p><a href="/sign-up">Sign up</a></p> </section>Copy the code

In the HTML above, you can use text-align to center the content

.hero { text-align: center; }
Copy the code

Unless you resize your browser window, you may ignore this problem.

Content close to the edge

Since there is no padding on the left and right, the content will be stuck to the edges. This is not user friendly because it makes browsing content more difficult.

The line of the big screen

On the big screen, paragraphs of text can be hard to read because the lines are too long. The recommended number of characters for a line is 45 to 75, depending on the layout style elements applied to the Web. Any characters outside that range make reading more difficult.

To avoid these problems, wrapper can be used to prevent text from becoming too long and to increase spacing on mobile devices.

<section class="hero"> <div class="hero__wrapper"> <h2>How to make bread at home</h2> <p>... </p> <p><a href="/sign-up">Sign up</a></p> </div> </section>Copy the code

The Hero__wrapper class is used here because the wrapper may only be customized for the Hero part, so it can have a width that is smaller than the generic Wrapper element.

.hero__wrapper {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}
Copy the code

To center content, specific attributes can be used depending on the situation. For this example, text-align:center is enough to center the content.

rightwrapperUsing CSS variables

There are very few wrappers of one size. The wrapper width can be small or large, depending on the content. By using CSS variables, we can create a more modern wrapper that has a lot of flexibility. Consider the following:

<div class="wrapper"></div>
Copy the code
.wrapper {
    max-width: var(--wrapper-width, 1170px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}
Copy the code

Var has two values. The first value is the –wrapper-width variable and the second value is 1170px. If the –wrapper-width variable is not set, 1170px will be used.

Of course, we can assign –wrapper-width directly inside the tag to dynamically set the desired value.

<div class="wrapper" style="--wrapper-width: 720px"></div>
Copy the code

If you don’t use CSS variables, you can also add a class:

<div class="wrapper wrapper--small"></div>
Copy the code
.wrapper--small {
    --wrapper-width: 720px;
    /* this will override the default wrapper width. */
}
Copy the code

usedisplay: contents

First, take a quick look at this property. Each element in CSS is a box that contains content, padding, Margin, and border. The display: contents style rule makes the div element produce no bounding boxes, so the margin, border, and padding parts of the element are not rendered. However, inherited attributes such as color and font can affect child elements as usual.

<header class="site-header"> <div class="wrapper site-header__wrapper"> <! -- Header content --> </div> </header>Copy the code
.site-header__wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
Copy the code

In the example above, you might want the title to extend to the entire width of the page, rather than being limited by the wrapper width.

.site-header__wrapper {
    display: contents;
}

.site-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
Copy the code

Thus, the.wrapper element will be hidden (similarly). Now, when display:flex is applied to the.site-header element, the descendants of.wrapper will become children of the.site-header.

Fluid background, fixed content

In her book CSS Secrets, Lea Verou describes an interesting technique that can be used for a flowing background (which takes up the entire viewport width) with a wrapper part inside. Let’s review common practices.

<section>
	<div class="wrapper"></div>
</section>
Copy the code
section {
	background-color: #ccc;
}

.wrapper {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}
Copy the code

Margin-left: auto and margin-right: auto work by calculating half the viewport width minus the content width. You can also do this using padding.

section {
  padding: 1rem calc(50% - 585px);
}
Copy the code

There is also a problem with this. On the move set the content will be pasted to the edge. One solution is as follows:

section { padding: 1rem; } @media (min-width: 1170px) { section { padding: 1rem calc(50% - 585px); }}Copy the code

Original text: ishaded.com/article/sty…

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

This article is updated weekly, you can search wechat ** [big move the world] the first time to read, reply [welfare] ** there are many front-end video waiting for you, this article GitHub github.com/qq449245884… Already included, welcome Star.