Hello A grid container has 4 sections. In each section, there are 2 items (text and image) and on the last sections, 2 card boxes. On mobile phones, The cyan boxes – item 1 – are visible and the green ones – item 2 – not visible. The card 2 on the last section is perfectly visible.
I provide JSFiddle. Please test only on mobile with less than 700px. Here is: jsfiddle.net/gusbemacbe/k1pr0ch3/5
If you want to understand, here is small snippet. 5 steps by step:
html,
body,
.grid-container {
height: 100%;
margin: 0;
}
.grid-container * {
border: 2px solid rebeccapurple;
position: relative;
}
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas: "secção-1""secção-2""secção-3""secção-4";
}
.secção-1,
.secção-2,
.secção-3,
.secção-4 {
display: grid;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
grid-column-gap: 12px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
padding: 10px;
}
.secção-1 {
background-color: salmon;
grid-area: secção-1;
grid-template-areas: "item-1 item-2";
}
.secção-2 {
background-color: crimson;
grid-area: secção-2;
grid-template-areas: "item-2 item-1";
}
.secção-3 {
background-color: goldenrod;
grid-area: secção-3;
grid-template-areas: "item-1 item-2";
}
.secção-4 {
background-color: darkslategrey;
grid-template-areas: "cartão-1 cartão-2";
grid-area: secção-4;
}
[class^='item-'],
[class^='cartão-'] {
align-items: center;
display: flex;
font-size: 5vh;
height: 100%;
justify-content: center;
width: 100%;
}
.item-1 {
background-color: aqua;
grid-area: item-1;
}
.item-2 {
background-color: seagreen;
grid-area: item-2;
}
.cartão-1 {
background-color: khaki;
grid-area: cartão-1;
}
.cartão-2 {
background-color: blueviolet;
grid-area: cartão-2;
}
flex to display because I want, like the reference 3, to keep the items/cards to fit up to the section's height and width, and the items/cards should be row and wrap. But with the flex, the items 2 disappeared, while the card 2 appears normally:@media screen and (max-width: 700px) {
[class^='secção-'] {
display: flex;
flex-direction: row;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
grid-column-gap: 0px;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
padding: 10px;
}
}
I know you were going to recommend table and other things, but if you change flex to table, the items 2 will appear but will lose full height.
Yashu Mittal
Full Stack Dev
I think 70%, the problem is in this code.
.secção-1, .secção-2, .secção-3, .secção-4 { display: grid; flex-flow: row wrap; -webkit-flex-flow: row wrap; grid-column-gap: 12px; grid-template-columns: 2fr 2fr; grid-template-rows: 2fr; padding: 10px; }