经典CSS布局

一、超级居中 place-items: center

HTML

<div class="parent blue" >
<div class="box coral" contenteditable>
:)
</div>

CSS

.parent { display: grid; place-items: center; }

二、解构煎饼式布局：flex:1 1 300px；flex-grow[定义项目的放大比例，默认为0] flex-shrink[定义了项目的缩小比例，默认为1] flex-basis[定义了在分配多余空间之前，项目占据的主轴空间（main size）]

实际可应用于自适应样式，大屏可舒展和小屏可堆叠

HTML

   <div class="parent2">

        <div class="child2">1:)</div>

        <div class="child2">2:)</div>

        <div class="child2">3:)</div>

    </div>

 

CSS

    .parent2 {

        display: flex;

        flex-wrap: wrap;

    }

    .child2 {

        /* //  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

     //  If we don't want the items to stretch: */

        flex: 0 1 400px;

        /* //  If we do want the items to stretch:

       flex: 1 1 300px; */

        /* //   etc. */

        border: 1px solid red;

        background: lightpink;

        font-size: 2rem;

        text-align: center;

    }

三、侧边栏布局：grid-template-columns: minmax(min, max) 1fr

对网格布局利用了 minmax 函数。我们在这里做的是将最小侧边栏大小设置为 150px ，但在更大的屏幕上，让它伸展出 25% 。侧边栏将始终占据其父级水平空间的 25%，直到 25% 变得小于 150px 。

HTML

 <div class="wrapper3">

        <div class="sidebar3" contenteditable>

            Min: 150px

            <br /> Max: 25%

        </div>

        <p class="content3" contenteditable>

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nulla architecto maxime modi nisi. Quas saepe dolorum, architecto quia fugit nulla! Natus, iure eveniet ex iusto tempora animi quibusdam porro?</p>

    </div>

CSS

 .wrapper3 {

        width: 100%;

        height: 100%;

        display: grid;

        grid-template-columns: minmax(150px, 25%) 1fr;

        padding: 0;

        margin: 0;

    }

   

    .sidebar3 {

        height: 100vh;

        /*  

  //   etc. */

        background: lightpink;

        font-size: 2rem;

        text-align: center;

    }

   

    .content3 {

        padding: 2rem;

    }

 

四、煎饼堆栈布局：grid-template-rows: auto 1fr auto

HTML

    <div class="wrapper4">

        <header>

            <h1>Header.com</h1>

        </header>

        <main></main>

        <footer>Footer Content — Header.com 2020</footer>

    </div>

CSS

    .wrapper4 {

        display: grid;

        

        grid-template-rows: auto 1fr auto;

    }

    /* // etc */

   

    header {

        background: lightpink;

        padding: 2rem;

    }

   

    main {

        background: coral;

    }

   

    footer {

        background: wheat;

        padding: 2rem;

        text-align: center;

    }

五、经典圣杯布局：grid-template: auto 1fr auto / auto 1fr auto

对于经典的圣杯布局，有页眉、页脚、左侧边栏、右侧边栏和主要内容。类似于以前的布局，但现在有侧边栏！

HTML

    <div class="wrapper5">

       

<header><h1 contenteditable>Header.com</h1></header>
<div class="left-sidebar" contenteditable>Left Sidebar</div>
<main contenteditable></main>
<div class="right-sidebar" contenteditable>Right Sidebar</div>
<footer contenteditable>Footer Content — Header.com 2020</footer>

    </div>

CSS

.wrapper5 {
display: grid;
height: 100vh;
grid-template: auto 1fr auto / auto 1fr auto
}

// etc

header {
background: lightpink;
padding: 2rem;
grid-column: 1 / 4;
}

.left-sidebar {
background: lightblue;
grid-column: 1 / 2;
}

main {
background: coral;
grid-column: 2 / 3;
}

.right-sidebar {
background: yellow;
grid-column: 3 / 4;
}

footer {
background: wheat;
padding: 2rem;
text-align: center;
grid-column: 1 / 4;
}

body {
font-family: system-ui, sans-serif;
}

.left-sidebar,
.right-sidebar {
padding: 1rem;
}

六、12 跨网格：grid-template-columns: repeat(12, 1fr)

可以使用 repeat() 函数在 CSS 中快速编写网格。对网格模板列使用 repeat(12, 1fr); 将为每个 1fr 提供 12 列。

HTML

    <div class="wrapper6">

<div class="span-12">Span 12</div>
<div class="span-6">Span 6</div>
<div class="span-4">Span 4</div>
<div class="span-2">Span 2</div>

 

    </div>

CSS

.wrapper6 {
display: grid;
height: 100vh;
grid-template-columns: repeat(12, 1fr);
}

// etc

div {
display: grid;
place-items: center;
}

.span-12 {
background: lightpink;
grid-column: 1 / 13;
}

.span-6 {
background: lightblue;
grid-column: 1 / 7;
}

.span-4 {
background: coral;
grid-column: 4 / 9;
}

.span-2 {
background: yellow;
grid-column: 3 / 5;
}

body {
font-family: system-ui, sans-serif;
}

七、RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr)) repeat(auto-fit, minmax(200px, 1fr));

HTML

    <div class="wrapper7">

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

 

    </div>

CSS

.wrapper7 {

display: grid;
height: 100vh;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

// etc

div {
display: grid;
place-items: center;
background: lightpink;
}

body {
font-family: system-ui, sans-serif;
}

八、 排列布局：justify-content: space-between

HTML

    <div class="wrapper8">

<div class="card">
<h1>Title - Card 1</h1>
<p>Medium length description. Let's add a few more words here.</p>
<div class="visual"></div>
</div>
<div class="card">
<h1>Title - Card 2</h1>
<p>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
<div class="visual"></div>
</div>
<div class="card">
<h1>Title - Card 3</h1>
<p>Short Description.</p>
<div class="visual"></div>
</div>

    </div>

CSS

.wrapper8 {

display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(3, 1fr);

}

// etc

.visual {
height: 100px;
width: 100%;
background: wheat;
margin: 0.5rem 0;
}

.card {
display: flex;
flex-direction: column;
justify-content: space-between;
background: lightpink;
padding: 1rem;
}

body {
font-family: system-ui, sans-serif;
}

h1 {
font-size: 1.5rem;
}

九、 保持我的风格：clamp(<min>, <actual>, <max>)

设置绝对最小和最大尺寸以及实际尺寸。有了值，应该这样：

HTML

    <div class="wrapper9">

<div class="card">
<h1>Title Here</h1>
<div class="visual"></div>
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
<br/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eveniet beatae veritatis saepe corporis voluptates illo placeat maxime sapiente. Sit facere cumque quidem ad quo, dolores pariatur repudiandae ullam animi?</p>
</div>

    </div>

CSS

.wrapper9 {

display: grid;
place-items: center;
height: 100vh;

}

.visual {
height: 100px;
width: 100%;
background: wheat;
margin: 0.5rem 0;
}

.card {
width: clamp(45ch, 50%, 75ch);
display: flex;
flex-direction: column;
background: lightpink;
padding: 1rem;
}

body {
font-family: system-ui, sans-serif;
}

h1 {
font-size: 1.5rem;
}

 

十、  保持宽高比：aspect-ratio: <width> / <height>

使用 aspect-ratio 属性，当调整卡片大小时，绿色视觉块保持 16 x 9 的宽高比。我们通过 aspect-ratio: 16 / 9 保持此宽高比。

HTML

    <div class="wrapper9">

<div class="card">
<h1>Title Here</h1>
<div class="visual"></div>
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
</div>

    </div>

CSS

.wrapper10 {

display: grid;
place-items: center;
height: 100vh;

}

.visual {
aspect-ratio: 16/9;
background: wheat;
margin: 0.5rem 0;
}

.card {
width: 80%;
display: flex;
flex-direction: column;
background: lightpink;
padding: 1rem;
}

body {
font-family: system-ui, sans-serif;
}

h1 {
font-size: 1.5rem;
}