我正试图通过媒体查询从网格中隐藏一列。我想隐藏第一列：
#grid-services {
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'iconp dicribep'
'iconf dicribef'
'iconq dicribeq';
grid-gap: 10px;
}
@media (max-width: 777px) {
#grid-services {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'dicribep'
'dicribef'
'dicribeq';
grid-gap: 10px;
为什么它不起作用？以下是完整的代码：
.iconp {
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
/* grid-column: 1 / 2;
grid-row: 1 / 2; */
grid-area: 'iconp';
}
.iconf {
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
/* grid-column: 1 / 2;
grid-row: 2 / 3; */
grid-area: 'iconf';
}
.iconq {
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
/* grid-column: 1 / 2;
grid-row: 3 / 4; */
grid-area: 'iconq';
}
.dicribep {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100px;
/* grid-column: 2 / 3;
grid-row: 1 / 2; */
grid-area: 'dicribep';
}
.dicribef {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100px;
/* grid-column: 2 / 3;
grid-row: 2 / 3; */
grid-area: 'dicribef';
}
.dicribeq {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100px;
/* grid-column: 2 / 3;
grid-row: 3 / 4; */
grid-area: 'dicribeq';
}
#grid-services {
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: 'iconp dicribep' 'iconf dicribef' 'iconq dicribeq';
grid-gap: 10px;
}
@media (max-width: 777px) {
#grid-services {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: 'dicribep' 'dicribef' 'dicribeq';
grid-gap: 10px;
}
}
#grid-prices {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: 'tenor' 'bass' 'valve';
gap: 18px;
}
@media (max-width: 777px) {
#grid-prices {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 18px;
grid-template-areas: 'tenor' 'bass' 'valve';
max-width: 250px;
margin: auto;
}
}<script src="https://kit.fontawesome.com/4d720cea97.js" crossorigin="anonymous"></script>
<section class="feature" id="feature">
<div id="grid-services">
<div class="iconp"><i class="fas fa-ambulance"></i></div>
<div class="dicribep">
<h2>Premium Materials</h2>
<p>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</p>
</div>
<div class="iconf"><i class="fas fa-baby-carriage"></i></div>
<div class="dicribef">
<h2>Fast Shipping</h2>
<p>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
</p>
</div>
<div class="iconq"><i class="fas fa-car"></i></div>
<div class="dicribeq">
<h2>Quality Assurance</h2>
<p>
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
</div>
</div>
</section>我希望当屏幕小于777px时，网格的第一列消失。
您的代码是正确的，只是需要删除grid-area周围的引号。(见下文(。
#how {
width: 70vw;
background-color: rgb(253, 253, 253);
margin: auto;
text-align: center;
}
.iconp {
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
/* grid-column: 1 / 2;
grid-row: 1 / 2; */
grid-area: iconp;
}
.iconf {
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
/* grid-column: 1 / 2;
grid-row: 2 / 3; */
grid-area: iconf;
}
.iconq {
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
/* grid-column: 1 / 2;
grid-row: 3 / 4; */
grid-area: iconq;
}
.dicribep {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100px;
/* grid-column: 2 / 3;
grid-row: 1 / 2; */
grid-area: dicribep;
}
.dicribef {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100px;
/* grid-column: 2 / 3;
grid-row: 2 / 3; */
grid-area: dicribef;
}
.dicribeq {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100px;
/* grid-column: 2 / 3;
grid-row: 3 / 4; */
grid-area: dicribeq;
}
#grid-services {
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: 'iconp dicribep' 'iconf dicribef' 'iconq dicribeq';
grid-gap: 10px;
}
@media (max-width: 777px) {
#grid-services {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: 'dicribep' 'dicribef' 'dicribeq';
grid-gap: 10px;
}
}<script src="https://kit.fontawesome.com/4d720cea97.js" crossorigin="anonymous"></script>
<section class="feature" id="feature">
<div id="grid-services">
<div class="iconp"><i class="fas fa-ambulance"></i></div>
<div class="dicribep">
<h2>Premium Materials</h2>
<p>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</p>
</div>
<div class="iconf"><i class="fas fa-baby-carriage"></i></div>
<div class="dicribef">
<h2>Fast Shipping</h2>
<p>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
</p>
</div>
<div class="iconq"><i class="fas fa-car"></i></div>
<div class="dicribeq">
<h2>Quality Assurance</h2>
<p>
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
</div>
</div>
</section>但是，现在在未定义的区域中有元素。
您还需要在较小的显示器上隐藏图标。
我还通过添加另外两个类(icon和dicribe(来避免重复代码。
#how {
width: 70vw;
background-color: rgb(253, 253, 253);
margin: auto;
text-align: center;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
font-size: 4rem;
}
.dicribe {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100px;
}
/* Icons */
.iconp {
grid-area: iconp;
}
.iconf {
grid-area: iconf;
}
.iconq {
grid-area: iconq;
}
/* dicribep */
.dicribep {
grid-area: dicribep;
}
.dicribef {
grid-area: dicribef;
}
.dicribeq {
grid-area: dicribeq;
}
#grid-services {
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: 'iconp dicribep' 'iconf dicribef' 'iconq dicribeq';
grid-gap: 10px;
}
@media (max-width: 777px) {
.icon { display: none; }
#grid-services {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: 'dicribep' 'dicribef' 'dicribeq';
}
}<script src="https://kit.fontawesome.com/4d720cea97.js" crossorigin="anonymous"></script>
<section class="feature" id="feature">
<div id="grid-services">
<div class="icon iconp"><i class="fas fa-ambulance"></i></div>
<div class="dicribe dicribep">
<h2>Premium Materials</h2>
<p>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</p>
</div>
<div class="icon iconf"><i class="fas fa-baby-carriage"></i></div>
<div class="dicribe dicribef">
<h2>Fast Shipping</h2>
<p>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
</p>
</div>
<div class="icon iconq"><i class="fas fa-car"></i></div>
<div class="dicribe dicribeq">
<h2>Quality Assurance</h2>
<p>
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
</div>
</div>
</section>