英文:
why the lower right white space is not filled by red
问题
我试图使用grid中的命名线来进行布局,但它不像我希望的那样工作,我知道我错在哪里,因为红色部分不想紧挨着页脚。
<header class="header">
HEADER
</header>
<div class="content">
CONTENT
</div>
<section class="text">
TEXT
</section>
<footer class="footer">
FOOTER
</footer>
.container {
height: 100vh;
display: grid;
grid-template-columns: [header-start content-start footer-start] 4fr [content-end footer-end section-start] 1fr [header-end section-end];
grid-template-rows: [header-start] 1fr [hrader-end content-start] 3fr [content-end footer-start] 1fr [footer-end];
gap: 10px;
padding: 10px;
}
header {
grid-column: header-start / header-end;
background-color: blanchedalmond;
}
.content {
grid-column: content-start / content-end;
background-color: skyblue;
}
section {
grid-column: section-start / section-end;
background-color: coral;
}
footer {
grid-column: footer-start / footer-end;
background-color: lightseagreen;
}
/*居中*/
.content,
header,
section,
footer {
display: flex;
justify-content: center;
align-items: center;
}
英文:
I'm trying to use named lines with grid to do the layout but it doesn't work for me as it should I know where I went wrong because the red section doesn't want to go next to the footer
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: grid;
grid-template-columns: [header-start content-start footer-start] 4fr [content-end footer-end section-start] 1fr [header-end section-end];
grid-template-rows: [header-start] 1fr [hrader-end content-start] 3fr [content-end footer-start] 1fr [footer-end];
gap: 10px;
padding: 10px;
}
header {
grid-column: header-start / header-end;
background-color: blanchedalmond;
}
.content {
grid-column: content-start / content-end;
background-color: skyblue;
}
section {
grid-column: section-start / section-end;
background-color: coral;
}
footer {
grid-column: footer-start / footer-end;
background-color: lightseagreen;
}
/*centering*/
.content,
header,
section,
footer {
display: flex;
justify-content: center;
align-items: center;
}
<!-- language: lang-html -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="grid2.css">
<title>grid-line</title>
</head>
<body>
<div class="container">
<header class="header">
HEADER
</header>
<div class="content">
CONTENT
</div>
<section class="text">
TEXT
</section>
<footer class="footer">
FOOTER
</footer>
</div>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
Sure, here is the translated content:
在你的 section 中添加 grid-row-end: span 2;
。
编辑: 我误解了问题,所以我编辑了代码片段。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: grid;
grid-template-columns: [header-start content-start footer-start] 4fr [content-end footer-end section-start] 1fr [header-end section-end];
grid-template-rows: [header-start] 1fr [hrader-end content-start] 3fr [content-end footer-start] 1fr [footer-end];
gap: 10px;
padding: 10px;
}
header {
grid-column: header-start / header-end;
background-color: blanchedalmond;
}
.content {
grid-column: content-start / content-end;
background-color: skyblue;
}
section {
grid-column: section-start / section-end;
grid-row-end: span 2; /* <---- 添加这部分 */
background-color: coral;
}
footer {
grid-column: footer-start / footer-end;
background-color: lightseagreen;
}
/*居中*/
.content,
header,
section,
footer {
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<header class="header">
HEADER
</header>
<div class="content">
CONTENT
</div>
<section class="text">
TEXT
</section>
<footer class="footer">
FOOTER
</footer>
</div>
I hope this helps! If you have any more translation requests or questions, feel free to ask.
英文:
Add grid-row-end: span 2;
in your section
EDIT: I missunderstood the question, so I edit the snippet.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: grid;
grid-template-columns: [header-start content-start footer-start] 4fr [content-end footer-end section-start] 1fr [header-end section-end];
grid-template-rows: [header-start] 1fr [hrader-end content-start] 3fr [content-end footer-start] 1fr [footer-end];
gap: 10px;
padding: 10px;
}
header {
grid-column: header-start / header-end;
background-color: blanchedalmond;
}
.content {
grid-column: content-start / content-end;
background-color: skyblue;
}
section {
grid-column: section-start / section-end;
grid-row-end: span 2; /* <---- ADD THIS PART */
background-color: coral;
}
footer {
grid-column: footer-start / footer-end;
background-color: lightseagreen;
}
/*centering*/
.content,
header,
section,
footer {
display: flex;
justify-content: center;
align-items: center;
}
<!-- language: lang-html -->
<div class="container">
<header class="header">
HEADER
</header>
<div class="content">
CONTENT
</div>
<section class="text">
TEXT
</section>
<footer class="footer">
FOOTER
</footer>
</div>
<!-- end snippet -->
答案2
得分: 0
以下是翻译后的代码部分:
第一部分:
这是布局:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="grid2.css">
<title>grid-line</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: grid;
grid-template-columns:repeat(1, 1fr, 150px);
grid-template-rows:repeat(3, 200px, 200px, 200px);
grid-template-areas:
"header header header header"
"content content content section"
"content content content section"
"footer footer footer footer";
gap: 10px;
padding: 10px;
}
header {
grid-area:header;
background-color: blanchedalmond;
}
.content {
grid-area:content;
background-color: skyblue;
}
section {
grid-area:section;
background-color: coral;
}
footer {
grid-area:footer;
background-color: lightseagreen;
}
/*居中*/
.content,
header,
section,
footer {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
HEADER
</header>
<div class="content">
CONTENT
</div>
<section class="text">
TEXT
</section>
<footer class="footer">
FOOTER
</footer>
</div>
</body>
</html>
第二部分:
这是我认为你期望的方式,以防万一,在这种情况下,section 出现在 content 旁边:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="grid2.css">
<title>grid-line</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: grid;
grid-template-columns:repeat(1, 1fr, 150px);
grid-template-rows:repeat(3, 200px, 200px, 200px);
grid-template-areas:
"header header header header"
"content content content section"
"content content content section"
"footer footer footer section";
gap: 10px;
padding: 10px;
}
header {
grid-area:header;
background-color: blanchedalmond;
}
.content {
grid-area:content;
background-color: skyblue;
}
section {
grid-area:section;
background-color: coral;
}
footer {
grid-area:footer;
background-color: lightseagreen;
}
/*居中*/
.content,
header,
section,
footer {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
HEADER
</header>
<div class="content">
CONTENT
</div>
<section class="text">
TEXT
</section>
<footer class="footer">
FOOTER
</footer>
</div>
</body>
</html>
这是一种简化使用 display grid 属性的方式。
英文:
This is the layout:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="grid2.css">
<title>grid-line</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: grid;
grid-template-columns:repeat(1, 1fr, 150px);
grid-template-rows:repeat(3, 200px, 200px, 200px);
grid-template-areas:
"header header header header"
"content content content section"
"content content content section"
"footer footer footer footer";
gap: 10px;
padding: 10px;
}
header {
grid-area:header;
background-color: blanchedalmond;
}
.content {
grid-area:content;
background-color: skyblue;
}
section {
grid-area:section;
background-color: coral;
}
footer {
grid-area:footer;
background-color: lightseagreen;
}
/*centering*/
.content,
header,
section,
footer {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
HEADER
</header>
<div class="content">
CONTENT
</div>
<section class="text">
TEXT
</section>
<footer class="footer">
FOOTER
</footer>
</div>
</body>
</html>
This is what I thought you were expecting, so just in case, in this one the section spawns next to the content:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="grid2.css">
<title>grid-line</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
height: 100vh;
display: grid;
grid-template-columns:repeat(1, 1fr, 150px);
grid-template-rows:repeat(3, 200px, 200px, 200px);
grid-template-areas:
"header header header header"
"content content content section"
"content content content section"
"footer footer footer section";
gap: 10px;
padding: 10px;
}
header {
grid-area:header;
background-color: blanchedalmond;
}
.content {
grid-area:content;
background-color: skyblue;
}
section {
grid-area:section;
background-color: coral;
}
footer {
grid-area:footer;
background-color: lightseagreen;
}
/*centering*/
.content,
header,
section,
footer {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
HEADER
</header>
<div class="content">
CONTENT
</div>
<section class="text">
TEXT
</section>
<footer class="footer">
FOOTER
</footer>
</div>
</body>
</html>
This is a simplified way of using the display grid property.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论