У меня есть базовый c местный сайт. Я сделал сетку CSS, и она отлично работает на рабочем столе.
Это макет, который у меня есть для рабочего стола:
Макет сетки на рабочем столе
Я добавил медиа-запрос, чтобы сделать все 1 столбец. Он работает, за исключением области «Вне»: он все еще отображается в виде 2-го столбца.
Я искал в Google и заметил в примерах других людей, что некоторые не включают точку перед классом grid-контейнера, а также оставили это из класса grid-контейнера в медиа-запросе.
Я удалил точку перед моим классом grid-контейнера и в классе grid-контейнера в медиа-запросе, и это заставило область Aside в столбец, как это должно быть для мобильных устройств.
Я хотел бы знать, почему удаление периода заставило медиа-запрос работать. Может кто-нибудь сказать мне, почему?
Разметка:
.grid-container
{
display:grid;
grid-template-columns: repeat(3, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
grid-template-areas:
"header header header"
"nav nav nav"
"emptyDiv EmptyDiv aside"
"article1 article1 aside"
"article2 article2 aside"
"section section aside"
"footer footer footer";
}
@media (max-width:320px)
{
.grid-container {
grid-template-columns: 100%;
grid-gap: 10px;
grid-template-areas:
"header"
"nav"
"emptyDiv"
"aside"
"article1"
"article2"
"section"
"footer";
}
}
.grid-header
{
grid-area: header;
grid-column: 1 /4;
grid-row:1;
background-color: blue;
color:white;
font-size: 110%;
align-items: left;
justify-content: left;
}
.grid-nav
{
grid-area: nav;
grid-column: 1/4;
grid-row:2;
background-color: darkorange;
color:white;
font-size: 110%;
align-items: left;
justify-content: left;
}
.grid-empty-div
{
grid-area: emptyDiv;
grid-column: 1 / 3;
grid-row:3;
background-color: darkgrey;
color:white;
font-size: 110%;
align-items: left;
justify-content: left;
}
.grid-aside
{
grid-area: aside;
grid-column: 3;
grid-row:3 / 7;
background-color: black;
color:white;
font-size: 110%;
align-items: left;
justify-content: left;
}
.grid-article-1
{
grid-area: article1;
grid-column:1 / 3;
grid-row: 4;
background-color: slategray;
color:white;
font-size: 110%;
align-items: left;
justify-content: left;
}
.grid-article-2
{
grid-area: article2;
grid-column:1 / 3;
grid-row: 5;
background-color: deeppink;
color:white;
font-size: 110%;
align-items: left;
justify-content: left;
}
.grid-section
{
grid-area: section;
grid-column:1 / 3;
grid-row: 6;
background-color: greenyellow;
color:white;
font-size: 110%;
align-items: left;
justify-content: left;
}
.grid-footer
{
grid-area: footer;
grid-column:1 / 4;
grid-row: 7;
background-color: deepskyblue;
color:white;
font-size: 110%;
align-items: left;
justify-content: left;
}
<!DOCTYPE html>
<html lang= en>
<head>
<meta charset = "utf-8">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/layout.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>My First Website</title>
</head>
<body>
<div class="grid-container">
<header class="grid-header"><h1>Welcome to My First Website</h1></header>
<nav class="grid-nav">
<a id="home-button" href="index.html"> Home</a>
<a href="about.html">About</a>
</nav>
<article class="grid-article-1" id="article-1">
<h2>Article # 1</h2>
<a href = "https://www.google.com/">Google</a>
<p><a href = "https://www.google.com/">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Nulla dictum lorem in ipsum consequat, eu elementum nibh consectetur. Donec ac varius lacus, ut suscipit ante. Mauris accumsan dui dolor, vel tristique mi fermentum in. Mauris vel enim vitae nibh volutpat lobortis in eget enim. Nunc et laoreet neque. Aliquam tincidunt sit amet massa eu malesuada. Vestibulum at ornare risus. Fusce malesuada, neque eget iaculis feugiat, risus magna imperdiet lectus, sed posuere metus tellus sit amet tortor. Aenean pellentesque lectus sit amet est lobortis, eu facilisis risus consectetur. Ut at molestie tellus, et rhoncus purus. Vivamus egestas pellentesque tellus ut luctus. Nullam maximus, libero ac viverra dapibus, orci tortor laoreet ligula, non rhoncus est leo id erat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</article>
<article class="grid-article-2, large-green-text">
<h2>Article # 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum lorem in ipsum consequat, eu elementum nibh consectetur. Donec ac varius lacus, ut suscipit ante. Mauris accumsan dui dolor, vel tristique mi fermentum in. Mauris vel enim vitae nibh volutpat lobortis in eget enim. Nunc et laoreet neque. Aliquam tincidunt sit amet massa eu malesuada. Vestibulum at ornare risus. Fusce malesuada, neque eget iaculis feugiat, risus magna imperdiet lectus, sed posuere metus tellus sit amet tortor. Aenean pellentesque lectus sit amet est lobortis, eu facilisis risus consectetur. Ut at molestie tellus, et rhoncus purus. Vivamus egestas pellentesque tellus ut luctus. Nullam maximus, libero ac viverra dapibus, orci tortor laoreet ligula, non rhoncus est leo id erat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</article>
<aside class="grid-aside">
<h3>This is the aside</h3>
<p class="large-green-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum lorem in ipsum consequat, eu elementum nibh consectetur. Donec ac varius lacus, ut suscipit ante. Mauris accumsan dui dolor, vel tristique mi fermentum in. Mauris vel enim vitae nibh volutpat lobortis in eget enim. Nunc et laoreet neque. Aliquam tincidunt sit amet massa eu malesuada. Vestibulum at ornare risus. Fusce malesuada, neque eget iaculis feugiat, risus magna imperdiet lectus, sed posuere metus tellus sit amet tortor. Aenean pellentesque lectus sit amet est lobortis, eu facilisis risus consectetur. Ut at molestie tellus, et rhoncus purus. Vivamus egestas pellentesque tellus ut luctus. Nullam maximus, libero ac viverra dapibus, orci tortor laoreet ligula, non rhoncus est leo id erat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</aside>
<section class= "grid-section">
<h3>This is the Section</h3>
<p class="large-green-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum lorem in ipsum consequat, eu elementum nibh consectetur. Donec ac varius lacus, ut suscipit ante. Mauris accumsan dui dolor, vel tristique mi fermentum in. Mauris vel enim vitae nibh volutpat lobortis in eget enim. Nunc et laoreet neque. Aliquam tincidunt sit amet massa eu malesuada. Vestibulum at ornare risus. Fusce malesuada, neque eget iaculis feugiat, risus magna imperdiet lectus, sed posuere metus tellus sit amet tortor. Aenean pellentesque lectus sit amet est lobortis, eu facilisis risus consectetur. Ut at molestie tellus, et rhoncus purus. Vivamus egestas pellentesque tellus ut luctus. Nullam maximus, libero ac viverra dapibus, orci tortor laoreet ligula, non rhoncus est leo id erat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</section>
<footer class= "grid-footer">
<p>This is the footer. Copyright 2055.</p>
</footer>
</div>
</body>
</html>
Я самоучка, поэтому прошу прощения за неправильные термины.