Introduction to the

Layout is very important in our daily front-end development. A good layout can simplify the code and improve the performance of the web page. Common layout methods include float, position, table, Flex, and grid. This article does not explain the layout method in detail, I recommend to see Ruan Yifeng teacher Flex layout tutorial and Ruan Yifeng teacher Grid layout tutorial.

This article mainly explains horizontal and vertical center, single column layout, double column layout, three column layout in some projects commonly used layout scheme.

All the code in this article is demonstrated using the Codepen online code tool.

In the middle

The center is often encountered in our daily work.

Horizontal center

For horizontal center, you can generally use the following four methods

  1. For inline elements we can set it on the parent elementtext-align:center;To implement.
  2. We can use this for fixed-size block-level elementsmargin: 0 auto;To implement.
  3. We can use it on the parent elementflexLayout to achieve.
  4. We can use it on the parent elementgridLayout to achieve.
<div class="div1">
  <span>The inline elements are horizontally centered</span>
</div>

<div class="div2">
  <span>The inline elements are horizontally centered</span>
  <div>Block-level elements are horizontally centered</div>
</div>

<div class="div3">
  <span>The inline elements are horizontally centered</span>
  <div>Block-level elements are horizontally centered</div>
</div>

<div class="div4">Block-level elements are horizontally centered</div>
Copy the code
.div1 {
  text-align: center;
}

.div2 {
  display: flex;
  justify-content: center;
}

.div3 {
  display: grid;
  justify-content: center;
}

.div4 {
  width: 130px;
  margin: 0 auto;
}
Copy the code

Results the following

Click to see an example of code in action

Vertical center

For vertical center, the following three methods can be used

  1. We can set it on the parent elementline-heightIs equal to theheightTo implement.
  2. We can use it on the parent elementflexLayout to achieve.
  3. We can use it on the parent elementgridLayout to achieve.
  4. We can use it on the parent elementtableLayout to achieve.
<div class="div1">
  <span>The inline elements are vertically centered</span>
<! -- <div> Block level elements centered vertically </div>
</div>

<div class="div2">
  <span>The inline elements are vertically centered</span>
  <div>Block-level elements are vertically centered</div>
</div>

<div class="div3">
  <span>The inline elements are vertically centered</span>
  <div>Block-level elements are vertically centered</div>
</div>

<div class="div4">
  <span>The inline elements are vertically centered</span>
  <div>Block-level elements are vertically centered</div>
</div>
Copy the code
.div1 {
  height: 100px;
  background: lightgreen;
  line-height: 100px;
}

.div2 {
  height: 100px;
  background: lightblue;
  display: flex;
  align-items: center;
}

.div3 {
  height: 100px;
  background: lightgreen;
  display: grid;
  align-content: center;
}

.div4 {
  height: 100px;
  background: lightblue;
  display: table-cell;
  vertical-align: middle;
}
Copy the code

Results the following

Click to see an example of code in action

Center both horizontally and vertically

For example, we want to achieve the following horizontal and vertical centralization effect

To achieve horizontal and vertical centralization, we can use absolute positioning, a Table layout, a Flex layout, or a Grid layout.

First we create a box that needs to be centered.

<div class="box"></div>
Copy the code

Pure absolute position

.box {
  position: absolute;
  width: 200px;
  height: 100px;
  background: red;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
Copy the code

Click to see an example of code in action

Absolute positioning with negative margins

In this way, we need to know the specific width and height of the center element, otherwise the negative margin cannot be set.

.box {
  position: absolute;
  width: 200px;
  height: 100px;
  background: red;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -50px;
}
Copy the code

Click to see an example of code in action

Absolute positioning plus translation

This way of translation does not need to consider the specific width and height of the center box.

.box {
  position: absolute;
  width: 200px;
  height: 100px;
  background: red;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

Click to see an example of code in action

Using Flex

html.body {
  height: 100%; 
}

body {
  background: gray;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  width: 200px;
  height: 100px;
  background: red;
}
Copy the code

Click to see an example of code in action

Using the Grid

html.body {
  height: 100%; 
}

body {
  background: gray;
  display: grid;
/* align-content: center; justify-content: center; * /
  
  /* short for align-content and justify-content */
  place-content: center;
}

.box {
  width: 200px;
  height: 100px;
  background: red;
}
Copy the code

Click to see an example of code in action

Use table with margins

Note the following when using the table layout

  1. display: tablewhenpaddingWill the failure
  2. display: table-rowwhenMargin, paddingAt the same time the failure
  3. display: table-cellwhenmarginWill the failure
<div class="box">
  <div class="child"></div>
</div>
Copy the code
.box {
  background: red;
  height: 300px;
  width: 600px;
  display: table-cell;
  vertical-align: middle;
}

.child {
  width: 200px;
  height: 200px;
  background: lightgreen;
  margin: 0 auto;
}
Copy the code

Click to see an example of code in action

Single column layout

Single column layout we commonly used in the web framework, generally we divided the page into header, content, footer three parts.

Depending on the project, we may have different style requirements for these three parts, such as top fixation, bottom fixation, and so on.

The top and bottom are not fixed

For example, if you want to achieve the following effect, the footer can be attached to the bottom of the window when there is not enough content, and can be pushed to the bottom of the window when there is too much content.

Use padding plus negative margin

<div class="wrap">
  <div class="header">header</div>
  <div class="content">content</div>
</div>
<div class="footer">footer</div>
Copy the code
html.body {
  height: 100%;
  margin: 0;
}

.wrap {
  min-height: 100%;
  padding-bottom: 50px;
  overflow: auto;
  box-sizing: border-box;
}

.header {
  height: 50px;
  background: lightblue;
}

.content {
  background: lightpink;
  /* The height here is just to simulate how much content */
  height: 100px; 
  /*  height: 1000px; */
}

.footer {
  height: 50px;
  background: lightgreen;
  margin-top: -50px;
}
Copy the code

Click to see an example of code in action

Using Flex

<div class="wrap">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>
Copy the code
html.body {
  height: 100%;
  margin: 0;
}

.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.header {
  height: 50px;
  background: lightblue;
}

.content {
  background: lightpink;
  /* The height here is just to simulate how much content */
  height: 100px;
  /* height: 1000px; * /
  flex-grow: 1;
}

.footer {
  height: 50px;
  background: lightgreen;
}
Copy the code

Click to see an example of code in action

At the top of the fixed

Use padding plus negative margin plus fixed to achieve a fixed top layout

<div class="header">header</div>
<div class="wrap">
 <div class="content">content</div>
</div>
<div class="footer">footer</div>
Copy the code
html.body {
  height: 100%;
  margin: 0;
}

.header {
  height: 50px;
  background: lightblue;
  position: fixed;
  width: 100%;
}

.wrap {
  min-height: 100%;
  padding-bottom: 50px;
  overflow: auto;
  box-sizing: border-box;
}

.content {
  margin-top: 50px;
  background: lightpink;
  /* The height here is just to simulate how much content */
  height: 100px; 
  /* height: 1000px; * /
}

.footer {
  height: 50px;
  background: lightgreen;
  margin-top: -50px;
}
Copy the code

Click to see an example of code in action

Use Flex plus fixed positioning implementation

<div class="wrap">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>
Copy the code
html.body {
  height: 100%;
  margin: 0;
}

.wrap {
  display: flex;
  min-height: 100%;
  flex-direction:column;
}

.header {
  height: 50px;
  background: lightblue;
  position: fixed;
  width: 100%;
}

.content {
  background: lightpink;
  /* The height here is just to simulate how much content */
  /* height: 100px; * /
  height: 1000px;
  margin-top: 50px;
  flex-grow: 1;
}

.footer {
  height: 50px;
  background: lightgreen;
}
Copy the code

Click to see an example of code in action

At the bottom of the fixed

Use padding and negative margin to fix the bottom layout

<div class="wrap">
  <div class="header">header</div>
  <div class="content">content</div>
</div>
<div class="footer">footer</div>
Copy the code
html.body {
  height: 100%;
  margin: 0;
}

.wrap {
  height: 100%;
  padding-bottom: 50px;
  overflow: auto;
  box-sizing: border-box;
}

.header {
  height: 50px;
  background: lightblue;
}

.content {
  background: lightpink;
  height: 100px;
  height: 1000px;
}

.footer {
  height: 50px;
  background: lightgreen;
  margin-top: -50px;
}
Copy the code

Click to see an example of code in action

Use Flex plus fixed positioning implementation

<div class="wrap">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>
Copy the code
html.body {
  height: 100%;
  margin: 0;
}

.wrap {
  display: flex;
  min-height: 100%;
  flex-direction:column;
}

.header {
  height: 50px;
  background: lightblue;
}

.content {
  background: lightpink;
  /* The height here is just to simulate how much content */
  /* height: 100px; * /
  height: 1000px;
  flex-grow: 1;
  margin-bottom: 50px;
}

.footer {
  height: 50px;
  background: lightgreen;
  position: fixed;
  width: 100%;
  bottom: 0;
}
Copy the code

Click to see an example of code in action

Top and bottom are fixed

Use fixed to achieve the top and bottom fixed layout

<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
Copy the code
html.body {
  height: 100%;
  margin: 0;
}

.header {
  height: 50px;
  background: lightblue;
  position: fixed;
  width: 100%;
}

.content {
  background: lightpink;
  padding-top: 50px;
  padding-bottom: 50px;
  /* height: 100px; * /
  height: 1000px;
}

.footer {
  height: 50px;
  background: lightgreen;
  position: fixed;
  bottom: 0;
  width: 100%;
}
Copy the code

Click to see an example of code in action

Use Flex plus fixed positioning implementation

<div class="wrap">
  <div class="header">header</div>
  <div class="content">content</div>
  <div class="footer">footer</div>
</div>
Copy the code
html.body {
  height: 100%;
  margin: 0;
}

.wrap {
  display: flex;
  min-height: 100%;
  flex-direction:column;
}

.header {
  height: 50px;
  background: lightblue;
  position: fixed;
  width: 100%;
}

.content {
  background: lightpink;
  /* The height here is just to simulate how much content */
  /* height: 100px; * /
  height: 1000px;
  flex-grow: 1;
  margin-bottom: 50px;
  margin-top: 50px;
}

.footer {
  height: 50px;
  background: lightgreen;
  position: fixed;
  width: 100%;
  bottom: 0;
}
Copy the code

Click to see an example of code in action

A two-column layout

The two-column layout is fixed on one side and adaptive on the other

There are many ways to achieve a two-column layout, and the author will introduce several more ways to use them next.

Left float, then right margin-left (right adaptive)

<div class="aside"></div>
<div class="main"></div>
Copy the code
div {
  height: 500px;
}

.aside {
  width: 300px;
  float: left;
  background: yellow;
}

.main {
  background: aqua;
  margin-left: 300px;
}
Copy the code

Click to see an example of code in action

Right float, then right margin-right (left adaptive)

<div class="aside"></div>
<div class="main"></div>
Copy the code
div {
  height: 500px;
}

.aside {
  width: 300px;
  float: right;
  background: yellow;
}

.main {
  background: aqua;
  margin-right: 300px;
}
Copy the code

Click to see an example of code in action

Absolute positioning plus margin-left (right adaptive)

<div class="wrap">
  <div class="aside"></div>
  <div class="main"></div>
</div>
Copy the code
div {
  height: 500px;
}

.wrap {
  position: relative;
}

.aside {
  width: 300px;
  background: yellow;
  position: absolute;
}

.main {
  background: aqua;
  margin-left: 300px;
}
Copy the code

Click to see an example of code in action

Absolute positioning plus margin-right (left adaptive)

<div class="wrap">
  <div class="aside"></div>
  <div class="main"></div>
</div>
Copy the code
div {
  height: 500px;
}

.wrap {
  position: relative;
}

.aside {
  width: 300px;
  background: yellow;
  position: absolute;
  right: 0;
}

.main {
  background: aqua;
  margin-right: 300px;
}
Copy the code

Click to see an example of code in action

Using Flex

<div class="wrap">
  <div class="aside"></div>
  <div class="main"></div>
</div>
Copy the code
div {
  height: 500px;
}

.wrap {
  display: flex;
}

.aside {
  flex: 0 0 300px;
  background: yellow;
  
}

.main {
  background: aqua;
  flex: 1 1;
}
Copy the code

Click to see an example of code in action

Using the Grid

<div class="wrap">
  <div class="aside"></div>
  <div class="main"></div>
</div>
Copy the code
div {
  height: 500px;
}

.wrap {
  display: grid;
  grid-template-columns: 300px auto;
}

.aside {
  background: yellow;
  
}

.main {
  background: aqua;
}
Copy the code

Click to see an example of code in action

Three column layout

Three column layout is fixed on both sides, the middle of the adaptive layout, the effect is as follows

There are also many methods to achieve the three-column layout, and the author will introduce several ways to use more.

Position + margin-left + margin-right to achieve a three-column layout

<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
Copy the code
html.body {
  margin: 0;
}

div {
  height: 500px;
}

.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  background: green;
}

.right {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  background: red;
}

.middle {
  margin-left: 200px;
  margin-right: 200px;
  background: lightpink;
}
Copy the code

Click to see an example of code in action

Float + margin-left + margin-right

<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
Copy the code
html.body {
  margin: 0;
}

div {
  height: 500px;
}

.left {
  width: 200px;
  background: green;
  float: left;
}

.right {
  width: 200px;
  background: yellow;
  float: right;
}

.middle {
  margin-left: 200px;
  margin-right: 200px;
  background: lightpink;
}
Copy the code

Click to see an example of code in action

Flex implements a three-column layout

<div class="wrap">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>
Copy the code
html.body {
  margin: 0;
}

div {
  height: 500px;
}

.wrap {
  display: flex;
}

.left {
  flex: 0 0 200px;
  background: green;
}

.right {
  flex: 0 0 200px;
  background: yellow;
}

.middle {
  background: lightpink;
  flex: 1 1;
}
Copy the code

Click to see an example of code in action

Grid implements a three-column layout

<div class="wrap">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>
Copy the code
html.body {
  margin: 0;
}

div {
  height: 500px;
}

.wrap {
  display: grid;
  grid-template-columns: 200px auto 200px;
}

.left {
  background: green;
}

.right {
  background: yellow;
}

.middle {
  background: lightpink;
}
Copy the code

Click to see an example of code in action

The holy grail layout

The Holy Grail layout is rarely used in projects anymore, and we’ll see it a lot in interviews, so you need to know about it.

The main use of floating and relative positioning.

<div class="container">
  <div class="content">In the middle of the content</div>
  <div class="left">On the left side of the area</div>
  <div class="right">The right area</div>
</div>
Copy the code
div {
  height: 500px;
}

.container {
  padding: 0 200px 0 200px;
  border: 1px solid black;
}

.content {
  float: left;
  width: 100%;
  background: #f00;
}

.left {
  width: 200px;
  background: #0f0;
  float: left;
  margin-left: -100%;
  position: relative;
  left: -200px;
}

.right {
  width: 200px;
  background: #00f;
  float: left;
  margin-left: -200px;
  position: relative;
  right: -200px;
}
Copy the code

Click to see an example of code in action

Twin wing layout

The double wing layout is basically not used in the project, we will often encounter in the interview, so we need to understand.

It’s mostly floating.

<div class="main">
  <div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
Copy the code
div {
  height: 500px;
}

.main {
  float: left;
  width: 100%;
  background: #f00;
}

.main .content {
  /* Margin, padding, etc. */
  
  /* margin-left: 200px; margin-right: 300px; * /
  padding-left: 200px;
  padding-right: 300px;
}

.left {
  width: 200px;
  background: #0f0;
  float: left;
  margin-left: -100%;
}

.right {
  width: 200px;
  background: #00f;
  float: left;
  margin-left: -200px;
}
Copy the code

Click to see an example of code in action

conclusion

Because the Flex and Grid layout methods are already powerful, 99% of the layout in your daily work can be done using these two methods. So I recommend using flex or Grid layouts as much as possible. Because it is not only simple but also has few negative effects.

Floating layouts and absolutely positioned layouts can cause elements to drift out of the flow of the document, which can have negative effects and sometimes unexpected results.

Flex layout compatibility and grid layout compatibility, has been well supported, you can rest assured to use.

Flex layout compatibility

Grid layout compatibility

Afterword.

Thank you for your patience, this article is the author’s personal learning notes, if there are fallacies, please inform, thank you! If this article is of any help to you, please click on the “like” button. Your support is my motivation to keep updating!