Grail layout and twin wing layout

1, Foreword

I've seen the interview questions of Holy Grail layout and double wing layout many times. Each time I thought I understood it. As a result, I didn't see it for a while or forgot it. Maybe the interview level I experienced was too low to get it.. In addition, there are generally no such optimization requirements in normal development, and they are rarely used. Today, let's take a good look again and summarize as follows:

2, Origin

This part is taken from Zhihu Understanding and thinking of CSS Holy Grail layout and double wing layout

The Grail layout comes from the article In Search of the Holy Grail The double wing layout comes from Taobao UED. Although their implementation methods are slightly different, they both follow the following points:

Fixed width on both sides and adaptive width in the middle
The middle part takes precedence over the DOM structure for first rendering
Allow any of the three columns to be the highest column
You only need to use an additional < div > tag

3, Realize the Grail layout

3.1. Overall idea

Overall idea (you can answer questions in the interview in this way):

The main idea of the Grail layout is to use the left and right padding to reserve the space for the left and right columns, and adjust the left and right columns to the reserved space through negative margin + positioning

3.2 specific implementation

3.2.1 source code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Grail layout</title>
		<link rel="stylesheet" href="./css/grail.css">
	</head>
	<body>
		<!-- To familiarize yourself with semantic tags, use header，and div Same effect -->
		<header>This is the title</header>
		<main>
			<div class="main">This is the content</div>
			<div class="left">This is on the left</div>
			<div class="right">This is the right side</div>
		</main>
		<footer>This is the footer</footer>
	</body>
</html>

css code:

* {
	margin: 0;
	padding: 0;
	text-align: center;
	color: #fff;
}

header,
footer {
	background-color: #058ED2;
	height: 100px;
	line-height: 100px;
}

main {
	/* Reserve the positions of the left and right columns through the left and right padding */
	padding: 0 300px 0 200px;
	position: relative;
}

main::after {
	content: "";
	display: block;
	clear: both;
}

.main,
.left,
.right {
	float: left;
}

.main {
	height: 400px;
	line-height: 400px;
	background-color: #ccc;
	width: 100%;
}

.left {
	height: 200px;
	width: 200px;
	line-height: 200px;
	background-color: #55007f;
	margin-left: -100%;
	position: relative;
	left: -200px;
}

.right {
	height: 300px;
	width: 300px;
	line-height: 300px;
	background-color: #55aa7f;
	margin-left: -300px;
	position: relative;
	left: 300px;
}

3.3.2 effect

Think 1: why wrap a layer of main tag?

Thinking 2: when the width of the Holy Grail layout is reduced to a certain extent, the page structure will collapse. Why

4, Achieve dual wing layout

4.1 significance of double wing layout

The Holy Grail layout has solved the problem of three columns. Why does Taobao UED propose the double flying wing layout? See thinking 2 above for details

4.2 overall idea

The double flying wing layout is realized by moving the left and right columns to the reserved space through the left and right margin of the main area

4.3 realization

4.3.1 source code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dual wing layout</title>
		<link rel="stylesheet" href="./css/wings.css">
	</head>
	<body>
		<!-- To familiarize yourself with semantic tags, use header，and div Same effect -->
		<header>This is the title</header>
		<main>
			<div class="main">This is the content</div>
		</main>
		<div class="left">This is on the left</div>
		<div class="right">This is the right side</div>
		<footer>This is the footer</footer>
	</body>
</html>

css source code

* {
	margin: 0;
	padding: 0;
	text-align: center;
	color: #fff;
}

header,
footer {
	background-color: #058ED2;
	height: 100px;
	line-height: 100px;
}

main {
	width: 100%;
	float: left;

}

.left,
.right {
	float: left;
}

/* Set the outer margin for main and reserve space on the left and right sides */
.main {
	margin: 0 300px 0 200px;
	height: 500px;
	line-height: 500px;
	background-color: #55557f;
}

.left {
	width: 200px;
	height: 200px;
	background-color: #00ACED;
	line-height: 200px;
	margin-left: -100%;
}

.right {
	height: 400px;
	width: 300px;
	margin-left: -300px;
	background-color: #111111;
	line-height: 400px;
}

footer {
	clear: both;
}

4.3.2 effect

5, Summary

The Holy Grail layout and the double flying wing layout have their own advantages and advantages, which are selected according to the business needs (talking about technology selection without business is nonsense)

Grail layout when the page is infinitely scaled, the page structure will collapse, and the code is more complex by using margin and positioning, but the code structure is more in line with the semantic specification

The double flying wing layout code does not conform to the semantic specification and has poor readability (the middle three columns should be at the same level, and the parent of the three columns should be at the same level as the head and tail; during implementation, except that the subjects belong to the first level and the subjects belong to the child level, see the dom structure of the double flying wing layout for details), but the code is more concise and there is no problem of collapse

Posted by tengkie on Thu, 18 Nov 2021 21:48:25 -0800

Programmer Group