Setting grid flex, green items labelled "item 2" have disappeared on each section on mobile phones
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:
- The container will be always grid of 4 sections on all gadgets:
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";
}
- Like the container, each section will be always row grid of 2 items/cards on all gadgets, except mobile phones:
.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;
}
- It will detect both items and cards, and centralize the items/cards horizontally and vertically, and will fit them up to section's height and width:
[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;
}
- I set
flex
todisplay
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 theflex
, 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.