前端常用布局

最近发现了 css Layout 这个网站：https://csslayout.io/
于是突发奇想，用纯 css 写几个常用布局看看，目前列举了以下四种：

效果可查看该视频：

单行等宽布局

<h2>单行等宽布局</h2>
    <div className='single-row-container'>
    {new Array(4).fill(null).map((item) => {
        return <div className='single-row-container-item'></div>;
    })}
</div>

.single-row-container {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  height: 150px;
  background-color: #00b8ff;
  align-items: center;
  padding: 8px;
  padding-left: 0;
}

.single-row-container-item {
  flex: 1;
  background-color: gray;
  margin-left: 8px;
  height: 100px;
  position: relative;
}

多行等宽布局

<h2>多行等宽布局</h2>
    <div className='multiple-row-container'>
    {new Array(16).fill(null).map((item) => {
        return (
        <div className='multiple-row-container-item-box'>
            <div className='multiple-row-container-item'></div>
        </div>
        );
    })}
</div>

.multiple-row-container {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  height: 600px;
  background-color: #00b8ff;
  align-items: center;
  padding-right: 8px;
}

.multiple-row-container-item-box {
  flex: 0 0 25%;
  background-color: transparent;
  height: 100px;
  display: flex;
}

.multiple-row-container-item {
  background-color: gray;
  margin-left: 8px;
  flex: 1;
}

粘性布局

<h2>粘性布局</h2>
    <div className='sticky-container'>
    {new Array(8).fill(null).map((item, index) => (
        <div className='sticky-container-item'>元素{index + 1}</div>
    ))}
</div>

.sticky-container {
  width: 800px;
  height: 300px;
  background-color: #00b8ff;
  overflow: scroll;
  color: #fff;
  text-align: center;
  line-height: 80px;
}

.sticky-container-item {
  height: 80px;
  position: sticky;
  top: 0;
  background-color: gray;
  margin-bottom: 20px;
}

圣杯布局

<h2>圣杯</h2>
    <div className='holy-grail-container'>
    <header></header>
    <main className='holy-grail-container-main'>
        <aside></aside>
        <article></article>
        <nav></nav>
    </main>
    <footer></footer>
</div>

.holy-grail-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 700px;
  background-color: #00b8ff;
}

.holy-grail-container-main {
  flex: 1;
  display: flex;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

.holy-grail-container-main > aside {
  width: 25%;
  height: 100%;
  border-right: 1px solid #eee;
  box-sizing: border-box;
}

.holy-grail-container-main > article {
  flex-grow: 1;
  height: 100%;
}

.holy-grail-container-main > nav {
  width: 25%;
  height: 100%;
  border-left: 1px solid #eee;
  box-sizing: border-box;
}

.holy-grail-container > header,
footer {
  height: 88px;
}