使用CSS网格复制蒙德里安绘画
使用CSS网格复制蒙德里安绘画
提问于 2020-05-17 05:10:00
我跟随这篇youtube教程，用CSS Grid https://www.youtube.com/watch?v=qNtJ5p3h2A4&list=PLbSquHt1VCf1x_-1ytlVMT0AMwADlWtc1&index=3制作了一幅响应式蒙德里安画
所以我有img标记来表示每个单元格。并将它们放入一个ul中
根据视频，基本上所有我需要写的css让它看起来像蒙德里安的画是
ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
grid-auto-rows: 80px;
grid-auto-flow: dense;
}<main>
<ul>
<li><img src="media/01-011/01.jpg" alt="white" /></li>
<li><img src="media/01-011/02.jpg" alt="white" /></li>
<li><img src="media/01-011/03.jpg" alt="yellow" /></li>
<li><img src="media/01-011/04.jpg" alt="white" /></li>
<li><img src="media/01-011/05.jpg" alt="white" /></li>
<li><img src="media/01-011/06.jpg" alt="red" /></li>
<li><img src="media/01-011/07.jpg" alt="yellow" /></li>
<li><img src="media/01-011/08.jpg" alt="white" /></li>
<li><img src="media/01-011/09.jpg" alt="white" /></li>
<li><img src="media/01-011/10.jpg" alt="white" /></li>
<li><img src="media/01-011/11.jpg" alt="black" /></li>
<li><img src="media/01-011/12.jpg" alt="white" /></li>
<li><img src="media/01-011/13.jpg" alt="white" /></li>
<li><img src="media/01-011/14.jpg" alt="yellow" /></li>
<li><img src="media/01-011/15.jpg" alt="white" /></li>
<li><img src="media/01-011/16.jpg" alt="blue" /></li>
<li><img src="media/01-011/17.jpg" alt="red" /></li>
<li><img src="media/01-011/18.jpg" alt="white" /></li>
<li><img src="media/01-011/19.jpg" alt="black" /></li>
<li><img src="media/01-011/20.jpg" alt="white" /></li>
</ul>
</main>
然而，结果是，每个网格单元似乎都没有意识到它包含的图像，图像只是溢出到单元之外。我附上了一个截图来向你展示我的意思。
这是一个现场演示的链接：https://codesandbox.io/s/lucid-pike-ocgr2?file=/index.html
我希望有人能从根本上向我解释为什么所有的图像都会从它的细胞中溢出出来。
回答 1
Stack Overflow用户
发布于 2020-10-08 03:25:30
这幅画的原始.scss：
* {
box-sizing: border-box;
}
html {
font-family: 'Futura W01', helvetica, san-serif;
line-height: 1.3;
font-size: 100%;
color: #3C3C3B;
font-weight: 300;
background: white;
}
body {
margin: 0;
}
img {
display: block;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: black;
text-decoration: none;
}
// ------------------------------------------------------------
// Index Page
// ------------------------------------------------------------
.index {
main {
margin: 3rem;
}
ul {
margin: 2rem auto;
padding: 0;
list-style: none;
}
li {
max-width: 300px;
margin-bottom: 20px;
}
img {
width: 100%;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
border: 1px solid #aaa;
}
.original img {
margin-top: 10px;
}
a {
display: block;
}
@supports (display: grid) {
ul { /* autoprefixer: off */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-gap: 2rem;
width: auto;
}
li {
width: auto;
margin: 0;
}
}
}
// ------------------------------------------------------------
// Deconstructed Mondrian
// ------------------------------------------------------------
.A {
main {
width: 70%;
margin: 10vw auto;
}
img {
height: auto;
width: auto;
border: 6px solid black;
}
li {
margin: 1em 0;
}
}
// ------------------------------------------------------------
// All the Assembled Mondrians
// ------------------------------------------------------------
.B, .C, .D, .E {
img {
height: 100%;
width: 100%;
object-fit: cover;
}
ul {
background: #1C1B1B;
-webkit-clip-path: polygon(10px 6px, calc(100% - 7px) 6px, calc(100% - 7px) calc(100% - 6px), 10px calc(100% - 6px));
clip-path: polygon(10px 6px, calc(100% - 7px) 6px, calc(100% - 7px) calc(100% - 6px), 10px calc(100% - 6px));
}
li {
border: 6px solid black;
}
}
// ------------------------------------------------------------
// Fluid Mondrian
// ------------------------------------------------------------
.B {
margin: -8px -8px -8px -10px;
overflow: hidden;
ul { /* autoprefixer: off */
display: grid;
grid-template-columns: repeat(5, 1fr) 1.2fr 1.2fr 0.5fr;
grid-template-rows: 11vw repeat(5, 13vw) 11vw 6.5vw 6.5vw;
}
}
// ------------------------------------------------------------
// Responsive Mondrian
// ------------------------------------------------------------
.C {
margin: 0 100px;
main {
margin: 4vw auto;
}
main {
max-width: 940px;
}
ul { /* autoprefixer: off */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
grid-auto-rows: 80px;
grid-auto-flow: dense;
}
@media (min-width: 940px) {
main {
}
}
}
// ------------------------------------------------------------
// Responsive Mondrian, keeping aspect ratio
// ------------------------------------------------------------
.D {
main {
width:80%;
margin: 4vw auto;
}
ul { /* autoprefixer: off */
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(1, calc(80vw/1));
grid-template-rows: repeat(1, calc(80vw/1));
max-width: 880px;
margin: 0 auto;
}
@media (min-width: 300px) {
ul { /* autoprefixer: off */
grid-template-columns: repeat(2, calc(80vw/2));
grid-template-rows: repeat(2, calc(80vw/2));
}
}
@media (min-width: 400px) {
ul { /* autoprefixer: off */
grid-template-columns: repeat(3, calc(80vw/3));
grid-template-rows: repeat(3, calc(80vw/3));
}
}
@media (min-width: 500px) {
ul { /* autoprefixer: off */
grid-template-columns: repeat(4, calc(80vw/4));
grid-template-rows: repeat(4, calc(80vw/4));
}
}
@media (min-width: 600px) {
ul { /* autoprefixer: off */
grid-template-columns: repeat(5, calc(80vw/5));
grid-template-rows: repeat(5, calc(80vw/5));
}
}
@media (min-width: 700px) {
ul { /* autoprefixer: off */
grid-template-columns: repeat(6, calc(80vw/6));
grid-template-rows: repeat(6, calc(80vw/6));
}
}
@media (min-width: 800px) {
ul { /* autoprefixer: off */
grid-template-columns: repeat(7, calc(80vw/7));
grid-template-rows: repeat(7, calc(80vw/7));
}
}
@media (min-width: 900px) {
ul { /* autoprefixer: off */
grid-template-columns: repeat(8, calc(80vw/8));
grid-template-rows: repeat(8, calc(80vw/8));
}
}
@media (min-width: 1000px) {
ul { /* autoprefixer: off */
grid-template-columns: repeat(9, calc(80vw/9));
grid-template-rows: repeat(9, calc(80vw/9));
}
}
@media (min-width: 1100px) {
ul { /* autoprefixer: off */
grid-template-columns: repeat(9, calc(880px/9));
grid-template-rows: repeat(9, calc(880px/9));
}
}
}
// ------------------------------------------------------------
// Responsive Diamond Mondrian
// ------------------------------------------------------------
.E {
display: flex;
align-items: center;
height: 100vh;
main {
width: calc(90vw - 12px);
margin: 10px auto;
clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%);
}
ul { /* autoprefixer: off */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-auto-rows: 80px;
grid-auto-flow: dense;
height: calc(90vw + 12px);
width: calc(90vw + 12px);
margin: -6px 0 0 -6px;
}
@media (min-width: 880px) {
main, ul {
width: 800px;
height: 800px;
}
}
}
// ------------------------------------------------------------
// Size the Blocks in all the variations
// ------------------------------------------------------------
.block-sizes {
li:nth-child(1) { /* autoprefixer: off */
grid-column: span 2;
}
li:nth-child(2) { /* autoprefixer: off */
grid-column: span 3;
}
li:nth-child(3) { /* autoprefixer: off */
grid-column: span 2;
}
li:nth-child(4) { /* autoprefixer: off */
grid-row: span 6;
}
li:nth-child(5) { /* autoprefixer: off */
grid-row: span 2;
}
li:nth-child(6) { /* autoprefixer: off */
grid-column: span 4;
grid-row: span 4;
}
li:nth-child(7) { /* autoprefixer: off */
grid-row: span 2;
grid-column: span 2;
}
li:nth-child(8) { /* autoprefixer: off */
grid-row: span 3;
}
li:nth-child(9) { /* autoprefixer: off */
grid-row: span 2;
}
li:nth-child(10) { /* autoprefixer: off */
grid-row: span 2;
}
li:nth-child(11) { /* autoprefixer: off */
grid-row: span 2;
grid-column: span 2;
}
li:nth-child(12) { /* autoprefixer: off */
grid-column: span 2;
}
li:nth-child(13) { /* autoprefixer: off */
grid-column: span 2;
}
li:nth-child(14) { /* autoprefixer: off */
grid-row: span 3;
}
li:nth-child(15) { /* autoprefixer: off */
grid-column: span 2;
}
li:nth-child(16) { /* autoprefixer: off */
grid-row: span 2;
grid-column: span 2;
}
li:nth-child(17) { /* autoprefixer: off */
grid-row: span 3;
}
li:nth-child(18) { /* autoprefixer: off */
grid-column: span 2;
grid-row: span 2;
}
li:nth-child(19) { /* autoprefixer: off */
grid-column: span 2;
}
li:nth-child(20) { /* autoprefixer: off */
grid-column: span 4;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61843607
复制相关文章
相似问题
腾讯云开发者
