preface

With the development of big front-end, UI frameworks emerge in endlessly, so that our front-end development of CSS ability requirements become not so high or not so strict, at least the importance is not as important as JS programming. However, the basic CSS still need us to master, today to summarize the way to write CSS layout.

Two columns of the layout

The left column is constant width, and the right column is adaptive

Float + margin layout

The HTML code

<body>
  <div id="left">The left column width</div>
  <div id="right">The right column is adaptive</div>
</body>
Copy the code

The CSS code:

#left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  margin-left: 200px; /* greater than or equal to the width of the left column */
  height: 400px;
  background-color: lightgreen;
}
Copy the code

Float + Overflow layout

The HTML code

<body>
  <div id="left">The left column width</div>
  <div id="right">The right column is adaptive</div>
</body>
Copy the code

CSS code

#left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}
Copy the code

Absolute positioning layout

HTML code:

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

The CSS code:

#parent {
  position: relative;
}
#left {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  position: absolute;
  top: 0;
  left: 200px;
  right: 0;
  height: 400px;
  background-color: lightgreen;
}
Copy the code

The table layout

HTML code:

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

The CSS code:

#parent {
  width: 100%;
  height: 400px;
  display: table;
}
#left.#right {
  display: table-cell;
}
#left {
  width: 200px;
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}
Copy the code

Flex layout

HTML code:

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

The CSS code:

#parent {
  width: 100%;
  height: 400px;
  display: flex;
}
#left {
  width: 200px;
  background-color: lightblue;
}
#right {
  flex: 1;
  background-color: lightgreen;
}
Copy the code

Grid layout

HTML code:

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

The CSS code:

#parent {
  width: 100%;
  height: 400px;
  display: grid;
  grid-template-columns: 200px auto;
}
#left {
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}
Copy the code

The left column is not wide, and the right column is adaptive

The width of the left column changes as content increases or decreases, and the right column ADAPTS

Float + Overflow layout

HTML code:

<body>
  <div id="left">The left column may not be wide</div>
  <div id="right">The right column is adaptive</div>
</body>
Copy the code

The CSS code:

#left {
  float: left;
  height: 400px;
  background-color: lightblue;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}
Copy the code

Flex layout

HTML code:

<body>
  <div id="parent">
    <div id="left">The left column may not be wide</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

The CSS code:

#parent {
  display: flex;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#right {
  flex: 1;
  background-color: lightgreen;
}
Copy the code

The grid layout

HTML code:

<body>
  <div id="parent">
    <div id="left">The left column may not be wide</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

The CSS code:

#parent {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}
Copy the code

Three column layout

Two columns are constant width and one is adaptive

Float + margin layout

HTML code:

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="center">Set a fixed width in the middle</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

The CSS code:

#parent {
  height: 400px;
}
#left {
  float: left;
  width: 100px;
  height: 400px;
  background-color: lightblue;
}
#center {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightgrey;
}
#right {
  margin-left: 300px; /* Width of left column + width of middle column */
  height: 400px;
  background-color: lightgreen;
}
Copy the code

Float + Overflow layout

HTML code:

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="center">Set a fixed width in the middle</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

The CSS code:

#parent {
  height: 400px;
}
#left {
  float: left;
  width: 100px;
  height: 400px;
  background-color: lightblue;
}
#center {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightgrey;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}
Copy the code

The table layout

HTML code:

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="center">Set a fixed width in the middle</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

The CSS code:

#parent {
  display: table;
  width: 100%;
  height: 400px;
}
#left {
  display: table-cell;
  width: 100px;
  background-color: lightblue;
}
#center {
  display: table-cell;
  width: 200px;
  background-color: lightgrey;
}
#right {
  display: table-cell;
  background-color: lightgreen;
}
Copy the code

Flex layout

HTML code:

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="center">Set a fixed width in the middle</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

The CSS code:

#parent {
  display: flex;
  width: 100%;
  height: 400px;
}
#left {
  width: 100px;
  background-color: lightblue;
}
#center {
  width: 200px;
  background-color: lightgrey;
}
#right {
  flex: 1;
  background-color: lightgreen;
}
Copy the code

The grid layout

The HTML code

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="center">Set a fixed width in the middle</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

CSS code

#parent {
  display: grid;
  grid-template-columns: 100px 200px auto;
  width: 100%;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#center {
  background-color: lightgrey;
}
#right {
  background-color: lightgreen;
}
Copy the code

Left and right fixed width, middle adaptive

Both the Grail layout and the twin wing layout aim to load the middle part first, and then start loading the left and right parts which are relatively unimportant.

The holy grail layout

Holy Grail layout: To keep the middle div from being obscured, set the middle div (or outermost parent div) to padding-left and padding-right (equal to the width of left and right), and place the left and right div in position relative to each other: Relative is combined with the left and right attributes, respectively, so that the left and right columns of divs are moved without overshadowing the middle div.

HTML code:

<body>
  <div id="parent">
    <div id="center">The middle column</div>
    <div id="left">The left column</div>
    <div id="right">Right column</div>
  </div>
</body>
Copy the code

The CSS code:

#parent {
  height: 400px;
  padding: 0 200px;
  overflow: hidden;
}
#left.#right {
  float: left;
  width: 200px;
  height: 100%;
  position: relative;
  background-color: lightblue;
}
#left {
  margin-left: -100%; /* make #left line */
  left: -200px;
}
#right {
  right: -200px;
  margin-left: -200px; /* make #right line */
}
#center {
  float: left;
  width: 100%;
  height: 100%;
  background-color: lightgrey;
}
Copy the code

Twin wing layout

In order to prevent the contents of the middle div from being blocked, a sub-div is created directly inside the middle div for placing the contents. Margin-left and margin-right are used to set aside space for the left and right columns of the sub-div.

HTML code:

<body>
  <div id="parent">
    <div id="center">
      <div id="center-inside">The middle column</div>
    </div>
    <div id="left">The left column</div>
    <div id="right">Right column</div>
  </div>
</body>
Copy the code

The CSS code:

#left.#right {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#left {
  margin-left: -100%; /* make #left line */
}
#right {
  margin-left: -200px; /* make #right line */
}
#center {
  float: left;
  width: 100%;
  height: 400px;
  background-color: lightgrey;
}
#center-inside {
  height: 100%;
  margin: 0 200px;
}
Copy the code

The flex implementation

HTML code:

<body>
  <div id="parent">
    <div id="center">The middle column</div>
    <div id="left">The left column</div>
    <div id="right">Right column</div>
  </div>
</body>
Copy the code

The CSS code:

#parent {
  display: flex;
}
#left.#right {
  flex: 0 0 200px;
  height: 400px;
  background-color: lightblue;
}
#left {
  order: -1; /* leave #left */
}
#center {
  flex: 1;
  height: 400px;
  background-color: lightgrey;
}
Copy the code