어수선하게 정리 된 열을 뒤집는 CSS 그리드 스타일을 만드는 방법

Question

나는 CSS Grid로 놀고 있었고 <section>은 이미지를 텍스트 옆에 놓고 아래의 <section>에있는 열 순서를 바꾸었다.

화면을 작게 만들 때 이미지가 항상 텍스트 위에 표시되기를 원합니다.

나는 지금이 작업을하고 있지만 CSS는 정말 어수선하게 보입니다. 나는 CSS Grid로 가능해야한다고 생각합니다.

.color:nth-child(odd) { 
 
    background-color: red; 
 
} 
 

 
.color:nth-child(even) { 
 
    background-color: green; 
 
} 
 

 
section { 
 
    background: black; 
 
    padding: 20px; 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; 
 
    grid-auto-flow: dense; 
 
} 
 

 
.content { 
 
    grid-column: 1/2; 
 
    text-align: center; 
 
} 
 

 
.content:nth-child(2) { 
 
    grid-column: 2/3; 
 
} 
 

 
.reverse>.content { 
 
    grid-column: 2/3; 
 
} 
 

 
.reverse>.content:nth-child(2) { 
 
    grid-column: 1/2; 
 
} 
 

 
@media(max-width: 768px) { 
 
    .content { 
 
    grid-column: 1/3; 
 
    } 
 
    .content:nth-child(2) { 
 
    grid-column: 1/3; 
 
    } 
 
    .reverse>.content { 
 
    grid-column: 1/3; 
 
    } 
 
    .reverse>.content:nth-child(2) { 
 
    grid-column: 1/3; 
 
    } 
 
}

<section> 
 
    <div class="content color"> 
 
    <p> 
 
     Image 
 
    </p> 
 
    </div> 
 

 
    <div class="content color"> 
 
    <p>Text</p> 
 
    </div> 
 

 
</section> 
 
<section class="reverse"> 
 
    <div class="content color"> 
 
    <p>Image</p> 
 
    </div> 
 

 
    <div class="content color"> 
 
    <p>Text</p> 
 
    </div> 
 
</section>

Answer 1

또한 일반 오래된 플로트 또는 매우 유연한 인 flexbox를 사용하지만, 그리드를 아는 것은 요즘해야 될 것으로 보인다 수 있습니다. 몇 가지 추가 옵션이 있습니다.이 중 하나는 order입니다.

.color:nth-child(odd) { 
 
    background-color: red; 
 
} 
 

 
.color:nth-child(even) { 
 
    background-color: green; 
 
} 
 

 
section { 
 
    background: black; 
 
    padding: 20px; 
 
    display: grid; 
 
    grid-template-columns: 1fr; 
 
    grid-auto-flow: dense; 
 
} 
 

 
@media(min-width: 768px) { 
 
    section { 
 
    grid-template-columns: 1fr 1fr; 
 
    } 
 
    .reverse .color:first-child { 
 
    order: 2; 
 
    } 
 
}

<section> 
 
    <div class="content color"> 
 
    <p> 
 
     Image 
 
    </p> 
 
    </div> 
 

 
    <div class="content color"> 
 
    <p>Text</p> 
 
    </div> 
 

 
</section> 
 
<section class="reverse"> 
 
    <div class="content color"> 
 
    <p>Image</p> 
 
    </div> 
 

 
    <div class="content color"> 
 
    <p>Text</p> 
 
    </div> 
 
</section>

Answer 2

나는 당신이 후에 어떤이는 완전히 확실하지 않다하지만 그룹 규칙을 쉼표로 분리 된 선택자 수 있습니다.

.color:nth-child(odd) { 
 
    background-color: red; 
 
} 
 

 
.color:nth-child(even) { 
 
    background-color: green; 
 
} 
 

 
section { 
 
    background: black; 
 
    padding: 20px; 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; 
 
    grid-auto-flow: dense; 
 
} 
 

 
.content, 
 
.reverse>.content:nth-child(2){ 
 
    grid-column: 1/2; 
 
} 
 

 
.content {text-align: center;} 
 

 
.content:nth-child(2), 
 
.reverse>.content { 
 
    grid-column: 2/3; 
 
} 
 

 

 
.reverse>.content:nth-child(2) { 
 
    grid-column: 1/2; 
 
} 
 

 
@media(max-width: 768px) { 
 
    .content, 
 
    .content:nth-child(2), 
 
    .reverse>.content, 
 
    .reverse>.content:nth-child(2){ 
 
    grid-column: 1/3; 
 
    } 
 
}

<section> 
 
    <div class="content color"> 
 
    <p> 
 
     Image 
 
    </p> 
 
    </div> 
 

 
    <div class="content color"> 
 
    <p>Text</p> 
 
    </div> 
 

 
</section> 
 
<section class="reverse"> 
 
    <div class="content color"> 
 
    <p>Image</p> 
 
    </div> 
 

 
    <div class="content color"> 
 
    <p>Text</p> 
 
    </div> 
 
</section>