CSS 그리드에 두 개의 열 레이아웃이 있고 1024px의 단일 열 레이아웃으로 전환하고 싶습니다.
.page {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
grid-column-gap: 5pt;
grid-row-gap: 5pt;
}
@media (max-width: 1024px){
.page{
display: block;
}
}
디스플레이 유형 변경은 비활성화 grid-template-rows등을 위한 완전한 솔루션 입니까, 아니면 명시 적으로 재설정해야합니까?
그리드를 사용하여 표시 유형을 설정할 때 "잘못"이 있습니까?
grid-template-columns및 의 초기 값은 grid-template-rows입니다 none.
따라서 속성을 재설정하려면 (명시 적 트랙이 생성되지 않음을 의미) grid-template-columns: none미디어 쿼리에서로 전환 합니다.
로 전환하여 grid-template-columns: 1fr하나의 명시 적 열이있는 그리드 를 작성할 수도 있습니다 .
article {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
grid-column-gap: 5pt;
grid-row-gap: 5pt;
}
section {
background-color: green;
}
@media (max-width: 600px) {
article {
grid-template-columns: 1fr;
/* OR, change value to 'none' */
}
section {
background-color: orangered;
}
}<article>
<section></section>
<section></section>
</article>사양 참조 :
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras