我正在使用CSS Grid将文字与图片混合在大屏幕上显示。但是我想在移动设备上将它们形成一列。基本上是桌面上的3列和移动设备上的1列。如何使用媒体查询实现?我在考虑查找禁用 768px
以下网格的命令,但我甚至不知道是否存在这样的命令。
.history {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 1em;
grid-row-gap: 100px;
}
.box1 {
grid-column: 1/3;
}
.box2 {
grid-column: 3;
justify-self: center;
}
.box3 {
grid-column: 1;
justify-self: center;
}
.box4 {
grid-column: 2/4;
}
.box5 {
grid-column: 1/3;
}
.box6 {
grid-column: 3;
justify-self: center;
}
.box7 {
grid-column: 1/4;
}
<div class="history">
<div class="box1">
<p>
The story starts in 2010 with Hartstown
</p>
</div>
<div class="box2">
<img src="images/clubs.jpg" alt="Clubs">
</div>
<div class="box3">
<img src="images/clubs1.jpg" alt="Clubs">
</div>
<div class="box4">
<h3>Clubs Officialy Merge... </h3>
<p>May 2011 saw the Official launch of Hartstown Aldridge Legends X1 in Dalymount Park...
</p>
</div>
<div class="box5">
<h3>Our First Full Season... </h3>
<p>We started the 2011 / 2012 Season with Approx 280 registered club altogether we had 18 Teams…..
</p>
</div>
<div class="box6">
<img src="images/logo.jpg" alt="Logo">
</div>
<div class="box7">
<h3>Forging Ahead... </h3>
<p>We presently have approx 400 Registered Club Players and approx 60 nd 2 Over 35'5 Teams and we are still growing...
</p>
</div>
</div>