CSS网格井喷

Question

我是web开发的新手。

几个月前，我开始创建一个投资组合网站，但我休息了两个月，现在我正试图再次进入它，并将我的投资组合项目以桌面大小相邻放置，但由于某种原因，它不起作用。。。

我试图通过搜索一些StackOverflow帖子来找出答案，但到目前为止一切都不起作用。我很确定我忽略了这一点，但是的，这是伴随着学习过程而来的，哈哈。

井喷图像

网格

/*
========================
INNTER GRID STYLES
========================
*/
.inner-grid {
display: grid;
grid-template-rows: 50px 1fr;
grid-template-columns: 1fr;
grid-template-areas: "portfolio-nav" "portfolio-item";
}
#portfolio-nav {
grid-area: "portfolio-nav";
border-top: 1px solid #0000001e;
display: flex;
justify-content: center;
align-items: center;
}
.portfolio-nav-style {
font-size: 0.9rem;
}

/*
========================
PORTFOLIO ITEM STYLES
========================
*/
.portfolio-item {
grid-area: "portfolio-item";
display: flex;
flex-direction: column;
justify-content: center;
align-items: left;
margin: 2px 5px;
}
#portfolio-item-1 {
margin-top: 0px;
background-color: #4B9A6D;
}
#portfolio-item-2 {
background-color: #7541C8;
}
.portfolio-item h4 {
font-weight: 300;
font-size: 1.5rem;
padding-top: 50px;
padding-bottom: 30px;
color: #ffff;
}
.portfolio-item p {
font-weight: 100;
color: rgba(255, 255, 255, 0.904);
}
.portfolio-item img {
max-width: 100%;
min-height: auto;
margin-top: 17px;
}
.portfolio-item h4,
p {
padding-left: 25px;
padding-right: 25px;
}
#view-project {
color: #ffff;
padding-top: 25px;
cursor: pointer;
}
#view-project:hover {
text-decoration: underline;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.inner-grid {
display: grid;
flex-direction: column;
grid-template-rows: 50px 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "portfolio-nav portfolio-nav" "portfolio-item portfolio-item";
}
.portfolio-item {
grid-area: "portfolio-item";
display: flex;
flex-direction: column;
justify-content: center;
align-items: left;
margin: 2px 5px;
width: 100%;
}
}

<div class="inner-grid">
<div id="portfolio-nav">
<nav id="main-header-nav-style">
<a href="#" class="portfolio-nav-style">Portfolio</a>
<a href="#" class="portfolio-nav-style">Learning</a>
</nav>
</div>
<div id="portfolio-item-1" class="portfolio-item">
<h4>Learning CSS Grid</h4>
<p>With this project, I learned how to create the holy grail layout using CSS Grid.</p>
<p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
<img src="/img/Laptop_Mobile_Mockup2.png" alt="">
</div>
<div id="portfolio-item-2" class="portfolio-item">
<h4>Learning Flexbox</h4>
<p>With this project, I learned how to create a Testimonial Grid with CSS Flexbox.</p>
<p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
<img src="/img/Laptop_Mobile_Mockup.png" alt="">
</div>
</div>

我希望有人能帮助我！

Answer 1

导航项的grid-area属性需要不带双引号的区域名称"。

此外，请确保grid-area在每个项目中都是唯一的。

参见下面的工作示例：

/*
========================
INNTER GRID STYLES
========================
*/
.inner-grid {
display: grid;
grid-template-rows: 50px 1fr;
grid-template-columns: 1fr;
grid-template-areas: "portfolio-nav" "portfolio-item-1" "portfolio-item-2";
}
#portfolio-nav {
grid-area: portfolio-nav;
border-top: 1px solid #0000001e;
display: flex;
justify-content: center;
align-items: center;
}
.portfolio-nav-style {
font-size: 0.9rem;
}

/*
========================
PORTFOLIO ITEM STYLES
========================
*/
.portfolio-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: left;
/*margin: 2px 5px;*/
}
#portfolio-item-1 {
grid-area: portfolio-item-1;
margin-top: 0px;
background-color: #4B9A6D;
}
#portfolio-item-2 {
grid-area: portfolio-item-2;
background-color: #7541C8;
}
.portfolio-item h4 {
font-weight: 300;
font-size: 1.5rem;
padding-top: 50px;
padding-bottom: 30px;
color: #ffff;
}
.portfolio-item p {
font-weight: 100;
color: rgba(255, 255, 255, 0.904);
}
.portfolio-item img {
max-width: 100%;
min-height: auto;
margin-top: 17px;
}
.portfolio-item h4,
p {
padding-left: 25px;
padding-right: 25px;
}
#view-project {
color: #ffff;
padding-top: 25px;
cursor: pointer;
}
#view-project:hover {
text-decoration: underline;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.inner-grid {
display: grid;
grid-template-rows: 50px 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "portfolio-nav portfolio-nav" "portfolio-item-1 portfolio-item-2";
}
.portfolio-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: left;
margin: 2px 5px;
width: 100%;
}
}

<div class="inner-grid">
<div id="portfolio-nav">
<nav id="main-header-nav-style">
<a href="#" class="portfolio-nav-style">Portfolio</a>
<a href="#" class="portfolio-nav-style">Learning</a>
</nav>
</div>
<div id="portfolio-item-1" class="portfolio-item">
<h4>Learning CSS Grid</h4>
<p>With this project, I learned how to create the holy grail layout using CSS Grid.</p>
<p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
<img src="/img/Laptop_Mobile_Mockup2.png" alt="">
</div>
<div id="portfolio-item-2" class="portfolio-item">
<h4>Learning Flexbox</h4>
<p>With this project, I learned how to create a Testimonial Grid with CSS Flexbox.</p>
<p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
<img src="/img/Laptop_Mobile_Mockup.png" alt="">
</div>
</div>

Answer 2

来自注释

grid-area: "portfolio-item";应该是grid-area: portfolio-item;，那么网格-template-columns: 1fr; grid-template-areas: "portfolio-nav" "portfolio-item";只设置1列。尝试修复所有这些，打字错误和2列网格；)-

如果需要，可以仅使用网格区域的可能修复程序

/*
========================
INNTER GRID STYLES
========================
*/
.inner-grid {
display: grid;
grid-template-rows: 50px 1fr;
grid-template-columns: 1fr;
grid-template-areas: "portfolio-nav" "portfolio-item";
}
#portfolio-nav {
border-top: 1px solid #0000001e;
display: flex;
justify-content: center;
align-items: center;
}
.portfolio-nav-style {
font-size: 0.9rem;
}
/*
========================
PORTFOLIO ITEM STYLES
========================
*/
.portfolio-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: left;
margin: 2px 5px;
}
#portfolio-item-1 {
margin-top: 0px;
background-color: #4b9a6d;
}
#portfolio-item-2 {
background-color: #7541c8;
}
.portfolio-item h4 {
font-weight: 300;
font-size: 1.5rem;
padding-top: 50px;
padding-bottom: 30px;
color: #ffff;
}
.portfolio-item p {
font-weight: 100;
color: rgba(255, 255, 255, 0.904);
}
.portfolio-item img {
max-width: 100%;
min-height: auto;
margin-top: 17px;
}
.portfolio-item h4,
p {
padding-left: 25px;
padding-right: 25px;
}
#view-project {
color: #ffff;
padding-top: 25px;
cursor: pointer;
}
#view-project:hover {
text-decoration: underline;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.inner-grid {
display: grid;
grid-template-rows: 50px 1fr;
grid-template-columns: 1fr 1fr;
grid-template-areas: "portfolio-nav portfolio-nav" "portfolio-item portfolio-item";
}
#portfolio-nav {
grid-area: portfolio-nav;
}
.portfolio-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: left;
margin: 2px 5px;
width: 100%;
}
}

<div class="inner-grid">
<div id="portfolio-nav">
<nav id="main-header-nav-style">
<a href="#" class="portfolio-nav-style">Portfolio</a>
<a href="#" class="portfolio-nav-style">Learning</a>
</nav>
</div>
<div id="portfolio-item-1" class="portfolio-item">
<h4>Learning CSS Grid</h4>
<p>With this project, I learned how to create the holy grail layout using CSS Grid.</p>
<p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
<img src="/img/Laptop_Mobile_Mockup2.png" alt="">
</div>
<div id="portfolio-item-2" class="portfolio-item">
<h4>Learning Flexbox</h4>
<p>With this project, I learned how to create a Testimonial Grid with CSS Flexbox.</p>
<p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
<img src="/img/Laptop_Mobile_Mockup.png" alt="">
</div>
</div>

或者将网格区域"portfolio-item portfolio-item"重命名为"portfolio-item1 portfolio-item2"，为不同的id分配不同的单元格，否则，它将跨越整个行，将两者叠加在一起。

Answer 3

我修改了你的代码，网格被完美地定位在

查看图片

在此处输入图像描述

我添加了一个div"；行"；内部"；内部网格"；其包含"；投资组合项目1"；以及"；投资组合项目2"；HTML代码：

<div class="inner-grid">
<div id="portfolio-nav">
<nav id="main-header-nav-style">
<a href="#" class="portfolio-nav-style">Portfolio</a>
<a href="#" class="portfolio-nav-style">Learning</a>
</nav>
</div>
<div class="row">
<div id="portfolio-item-1" class="portfolio-item">
<h4>Learning Flexbox</h4>
<p>With this project, I learned how to create a Testimonial Grid with CSS Flexbox.</p>
<p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
<img src="assets/img/lapttop-mobile2.png" alt="">
</div>
<div id="portfolio-item-2" class="portfolio-item">
<h4>Learning CSS Grid</h4>
<p>With this project, I learned how to create the holy grail layout using CSS Grid.</p>
<p id="view-project">View Project <i class="fas fa-chevron-right"></i></p>
<img src="assets/img/lapttop-mobile2.png" alt="">
</div>


</div>


</div>

CS代码：

body
{
margin: 0; /* removing the default body margin */
}
#portfolio-nav {
grid-area: "portfolio-nav";
border-top: 1px solid #0000001e;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
}
#portfolio-nav a
{
text-decoration: none;
color: gray;
margin: 10px;
font-weight: bold;
}
.row
{
display: grid;
grid-template-columns: auto auto; 
}
.portfolio-item
{
padding: 20px;
}
.portfolio-item h4, .portfolio-item p
{
color: white;
}
.row #portfolio-item-1
{
background:  #7541C8;
}
.row #portfolio-item-2
{
background:  #4B9A6D;
}