This is the tenth day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021.

Previous recommendations:

“Full Screen CSS Layout”

“CSS Layout (2) multi-column Layout”

“CSS Layout (3) equal Layout”

“CSS Layout (4) text Layout”

preface

Grail layout and twin wing layout

Grail layout and wing layout is also a very classic layout, is composed of left, middle and right columns, left and right columns fixed, the middle adaptive, fixed and equal height. Let’s see how this works.

<div class="layout">
  <div class="layout-left"></div>
  <div class="layout-right"></div>
  <div class="layout-center"></div>
</div>
Copy the code

Implemented with float and margin/pading

The grail layout is basically the same as the twin wing layout, but there are some differences in the details.

Similarities:

  • This is done by intermediate column adaptive.

  • Float the left and right columns left and right by float.

Difference:

  • Holy Grail layout: Parent nodes are left and right column positions using padding.

  • Double wing layout: The center column uses margin to make room for the left and right columns.

Note: The floating node will sink if it is higher than the previous or horizontal non-floating node. So when writing HTML, move the middle column behind the right-column node.

The holy grail layout

.layout { width: 1000px; height: 800px; padding: 0 200px; .layout-left { float: left; width: 200px; height: 100%; margin-left: -200px; background-color: crimson; } .layout-right { float: right; width: 200px; height: 100%; margin-right: -200px; background-color: yellow; } .layout-center { height: 100%; background-color: blue; }}Copy the code

Twin wing layout

.layout { width: 1000px; height: 800px; .layout-left { float: left; width: 200px; height: 100%; background-color: crimson; } .layout-right { float: right; width: 200px; height: 100%; background-color: yellow; } .layout-center { margin: 0 200px; height: 100%; background-color: blue; }}Copy the code

Implemented with Flex

It is still fairly simple to implement in Flex, and the middle column is adaptive by setting Flex: 1.

<div class="layout">
  <div class="layout-left"></div>
  <div class="layout-center"></div>
  <div class="layout-right"></div>
</div>
Copy the code
.layout { display: flex; width: 1000px; height: 800px; .layout-left { width: 200px; background-color: crimson; } .layout-right { width: 200px; background-color: yellow; } .layout-center { flex: 1; background-color: blue; }}Copy the code

Well, that’s all for today. You are still the best today. Come on, come on, you’re the best! Come on, come on, you’re the best! Oh huo, Bye Bye!!