英文:
How to achieve a block shape display by css grid
问题
如果我使用CSS网格，我可以创建一个内容区域，类似于以下方式：
grid-template-areas:
"b b a a"
"b b a a"
"b b a a"
"b b a a"
"c c c c";
但我想要实现类似下面的效果，网格的限制不允许这样做，但是否有其他方法来实现这个效果？
grid-template-areas:
"b b a a"
"b b a a"
"a a a a"
"a a a a"
"c c c c";
这是一个简单的UI卡片，我正在使用：
- a 用于描述区域
- b 用于图像区域
- c 用于页脚区域
英文:
If I use a css grid, I have have a content area like
grid-template-areas:
"b b a a"
"b b a a"
"b b a a"
"b b a a"
"c c c c";
But I want to have something like below, grid limitations doesn’t aloow this, but any other way to implement this ?
grid-template-areas:
"b b a a"
"b b a a"
“a a a a"
“a a a a"
"c c c c";
This is a simple card on UI where I’m using
- a is for description area
- b is for image area
- c is used for footer
area
答案1
得分: 1
以下是您要翻译的内容：
这确实是使用 float 的目的。这里有一个简单的演示：
* {margin: 0; padding: 0; box-sizing: border-box;}
section {
display: grid;
grid-template: 3fr 1fr / 500px;
grid-template-areas:
"a"
"c";
gap: 20px;
margin: 40px;
}
article {
grid-template-areas: "a";
}
img {
float: left;
padding: 0 20px 20px 0;
width: 50%;
}
footer {
padding: 20px;
background: #e7e7e7;
grid-template-areas: "c";
}
<section>
<article>
<p><img src="http://placehold.it/200x200">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil voluptatibus, beatae in saepe ullam laborum atque nulla quam commodi vitae ab rerum itaque quaerat deleniti ut eligendi veniam optio officiis, ipsum dolor sit amet consectetur adipisicing elit. Nihil voluptatibus, beatae in saepe ullam laborum atque nulla quam commodi vitae ab rerum itaque quaerat deleniti ut eligendi veniam optio officiis, ipsum dolor sit amet consectetur adipisicing elit. Nihil voluptatibus, beatae in saepe ullam laborum atque nulla quam commodi vitae ab rerum itaque quaerat deleniti ut eligendi veniam optio officiis.</p>
</article>
<footer>This is the footer.</footer>
</section>
我已完成翻译，没有其他内容。
英文:
This is really the purpose of float. Here's a simple demo:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {margin: 0; padding: 0; box-sizing: border-box;}
section {
display: grid;
grid-template: 3fr 1fr / 500px;
grid-template-areas:
"a"
"c";
gap: 20px;
margin: 40px;
}
article {
grid-template-areas: a;
}
img {
float: left;
padding: 0 20px 20px 0;
width: 50%;
}
footer {
padding: 20px;
background: #e7e7e7;
grid-template-areas: c;
}
<!-- language: lang-html -->
<section>
<article>
<p><img src="http://placehold.it/200x200" >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil voluptatibus, beatae in saepe ullam laborum atque nulla quam commodi vitae ab rerum itaque quaerat deleniti ut eligendi veniam optio officiis, ipsum dolor sit amet consectetur adipisicing elit. Nihil voluptatibus, beatae in saepe ullam laborum atque nulla quam commodi vitae ab rerum itaque quaerat deleniti ut eligendi veniam optio officiis, ipsum dolor sit amet consectetur adipisicing elit. Nihil voluptatibus, beatae in saepe ullam laborum atque nulla quam commodi vitae ab rerum itaque quaerat deleniti ut eligendi veniam optio officiis.</p>
</article>
<footer>This is the footer.</footer>
</section>
<!-- end snippet -->
I wouldn't use template areas for this, but just used them to get closer to your original suggestion.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论