There is a project that requires the student to create a simple menu, or list with any type of object (did that inside the div and the class is menu), and when you resize the screen, it will be responsive through the use of media queries.
There are six objects.
Max res will show the objects in a line at the top - it's done and ok, simple.
Medium res will show two objects side by side, in two columns, so basically a 3x2 grid (line x column) - I have no idea why but the items are overlapping and not staying on a specific place as they should. Tried using grid template, but somehow it's not really effective. I have no idea if the syntax is wrong, but I may have missed something.
Low res will show the objects as a vertical list - done and ok, also simple to do.
To make it easier to analyze and try to find the error, I've put everything in the same html code below.
<main>
<head>
<style>
@media (min-width:769px) {
.menu {
color: rgb(200,0,0);
background-color: white;
display:inline-block;
width: 16%;
}
.menu2 {
color: rgb(200,0,0);
background-color: white;
display:inline-block;
width: 16%;
}
}
@media (min-width:481px) and (max-width: 768px){
.parent{
display:grid;
display:block;
height:auto;
grid-template-areas:
"content1" "content2";
}
.menu {grid-area: content1;}{
color: blue;
background-color: yellow;
min-height:150px;
}
.menu2 {grid-area: content2;}{
color: blue;
background-color: yellow;
min-height:150px;
}
}
@media (max-width: 480px){
.menu {
color: green;
background-color: black;
display:list-item;
width: 100%;
}
.menu2 {
color: green;
background-color: black;
display:list-item;
width: 100%;
}
}
</style>
</head>
<body>
<div class="parent">
<div class="menu">
<p>Objeto 1</p>
</div>
<div class="menu">
<p>Objeto 2</p>
</div>
<div class="menu">
<p>Objeto 3</p>
</div>
<div class="menu2">
<p>Objeto 4</p>
</div>
<div class="menu2">
<p>Objeto 5</p>
</div>
<div class="menu2">
<p>Objeto 6</p>
</div>
</div>
</body>
</main>`
The professor is asking the students to only use the media queries.
Medium res will show two objects side by side, in two columns, so basically a 3x2 grid (line x column)
As mentioned above:
I tried just leaving them inside a div and they also don't show up as a column, it's like the code skips this middle part and just shows the lined-up and the vertical menu.
I have no idea why but the items are overlapping and not staying on a specific place as they should.
Because grid-template-areas literally defines the areas, in your case you only defined two areas. So 3 items are trying to fit into the same area, which causes them to overlap. What you want might be grid-template-columns.
Here's a simplified version of your approach using grid:
.parent {
display: grid;
}
@media (min-width:769px) {
/* large screen, flow by column */
.parent {
grid-auto-flow: column;
}
.menu {
background-color: green;
}
}
@media (min-width:481px) and (max-width: 768px) {
/* medium screen, 2 columns, 3 rows */
.parent {
grid-auto-flow: column;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
}
.menu {
background-color: yellow;
}
}
@media (max-width: 480px) {
/* small screen, flow by row, default grid behavior, no changes needed */
.menu {
background-color: blue;
}
}<div class="parent">
<div class="menu">
<p>Objeto 1</p>
</div>
<div class="menu">
<p>Objeto 2</p>
</div>
<div class="menu">
<p>Objeto 3</p>
</div>
<div class="menu">
<p>Objeto 4</p>
</div>
<div class="menu">
<p>Objeto 5</p>
</div>
<div class="menu">
<p>Objeto 6</p>
</div>
</div>