CSS adaptive layout realizes the overall centering of sub-element items and left alignment of internal items

In daily work, we may encounter a layout like this: a parent element frame (adaptive width as the browser size) contains many buttons, and then these buttons (fixed width) need to be centered in the parent element, and the overall content of the buttons is arranged from left to right. Here is a solution, the example is as follows:

There is the following code:

<div class="wrap">
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
    <button class="btn">4</button>
    <button class="btn">5</button>
    <button class="btn">6</button>
    <button class="btn">7</button>
</div>

The corresponding CSS is:

.wrap {
    border: 2px solid black;
    margin: 0 auto;
    padding: 10px;
    width: 40%;
}
.btn {
    outline: none;
    border: none;
    width: 180px;
    height: 30px;
    background-color: cornflowerblue;
    margin: 5px;
}

Display effect:

Dynamically changing width:

As you can see, when we reduce the size of the browser window, the width of the parent element (black box) will be dynamically adjusted, and its child elements will also be dynamically arranged according to the width of the parent element. However, the button group is left-aligned in the parent container. If we want to keep the whole thing centered, we can do the following:

CSS code:

.wrap {
    border: 2px solid black;
    margin: 0 auto;
    padding: 10px;
    width: 40%;
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    justify-content: center;
}
.btn {
    outline: none;
    border: none;
    width: 180px;
    height: 30px;
    background-color: cornflowerblue;
    margin: 5px;
}

Set the parent element's display property to grid , set the grid column template to auto-fill, and set the width to 200px (the width here can be slightly larger than a single button element), and then set justify-content property value to center to center the content horizontally. The effect is as follows:

Dynamically changing effects:

It can be seen that during the width change process, the sub-element as a whole has always remained centered.

To achieve this effect with CSS alone, I only thought of using grid. If you have other methods, please leave a message and learn together~

Tip: The compatibility of grid is not very good at present. If you need to support older browser versions, use it with caution!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.