学习一篇教程，如何设计等高布局，以下是一个简单的示例页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
display: grid;
justify-content: center;
gap: 2rem;
}
.container {
padding: 1rem 0;
max-width: 80ch;
margin: 0 auto;
box-shadow: inset 0 0 0 1px #000;
}
.column {
margin: 1rem;
background-color: #ccc;
}
.element {
padding: 0.5rem;
background-color: rebeccapurple;
color: #fff;
}
.flexbox {
display: flex;
&.col-3 {
flex-wrap: wrap;
.column {
margin: 0.5rem;
max-width: calc(100% / 3 - 1rem);
}
}
.element {
height: 100%;
}
&.col-3 {
flex-wrap: wrap;
.column {
margin: 0.5rem;
max-width: calc(100% / 3 - 1rem);
}
}
}
.grid {
display: grid;
grid-auto-flow: column;
.element {
height: 100%;
}
&.col-3 {
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: unset;
padding: 1rem 0.5rem;
.column {
margin: 0;
}
}
}
</style>
</head>
<body>
<div class="container flexbox">
<div class="column">
<div class="element">
<p>flexbox 子元素等高布局，但是不等宽。flexbox 子元素等高布局，但是不等宽。</p>
</div>
</div>
<div class="column">
<div class="element">
<p>flexbox 子元素等高布局，但是不等宽。</p>
</div>
</div>
</div>
<div class="container flexbox col-3">
<div class="column">
<div class="element">
<p>flexbox col-3: 子元素等高布局，每行指定3列等宽布局。</p>
</div>
</div>
<div class="column">
<div class="element">
<p>flexbox col-3: 子元素等高布局，每行指定3列等宽布局。</p>
</div>
</div>
<div class="column">
<div class="element">
<p>flexbox col-3: 子元素等高布局，每行指定3列等宽布局。</p>
</div>
</div>
<div class="column">
<div class="element">
<p>flexbox col-3: 子元素等高布局，每行指定3列等宽布局。</p>
</div>
</div>
</div>
<div class="container grid">
<div class="column">
<div class="element">
<p>
grid子元素等高布局，默认等宽。grid子元素等高布局，默认等宽。grid子元素等高布局，默认等宽。
</p>
</div>
</div>
<div class="column">
<div class="element">
<p>grid子元素等高布局，默认等宽。grid子元素等高布局，默认等宽。</p>
</div>
</div>
</div>
<div class="container grid col-3">
<div class="column">
<div class="element">
<p>
grid col-3:
grid子元素等高布局，每行指定3列等宽布局。grid子元素等高布局，每行指定3列等宽布局。
</p>
</div>
</div>
<div class="column">
<div class="element">
<p>grid col-3: grid子元素等高布局，每行指定3列等宽布局。</p>
</div>
</div>
<div class="column">
<div class="element">
<p>grid col-3: grid子元素等高布局，每行指定3列等宽布局。</p>
</div>
</div>
<div class="column">
<div class="element">
<p>grid col-3: grid子元素等高布局，每行指定3列等宽布局。</p>
</div>
</div>
</div>
</body>
</html>
What I Learned
flex 和 grid 布局的一些特性，如何运用这些特性实现等高和等宽布局，还有使用&符号 css 串联的写法。