그리드 미디어객체

✓   미디어객체에 그리드 레이아웃을 사용할 때의 장점은 필요할 때 레이아웃을 2차원으로 제어할 수 있기 때문이다(곧, 바닥글이 있는 경우; 바닥글을 미디어객체의 맨 아래로 푸시할 수 있게 된다!). 나아가, 이미지의 트랙 크기 조정에 fit-content 키워드를 사용할 수 있다는 장점도 있다. 예컨대, 최대 300px 크기로 적용하면; 작은 이미지가 있을 때 트랙은 해당 이미지의 크기만큼만 커지게 되고, 이미지가 더 크다면; 트랙이 300px 에서 증가를 멈추고 열에 맞도록 크기가 줄어드는 것이다!

- 화면 너비를 줄여보세요..

        
            @media (min-width: 600px) { /* 뷰포트 너비가 600px보다 작아지면; 적층 레이아웃으로 변경된다! */
                .ns-media { /* 수평 레이아웃 */
                    display: grid;
                    grid-template-columns: fit-content(300px) 1fr; /* 이미지 너비는 최대 300px 까지로 제한함 */ 
                    grid-template-rows: 1fr auto;
                    grid-template-areas:
                        "image content"
                        "image footer";
                    grid-gap: 1em;
                }

                .ns-image { grid-area: image; }
                .ns-content { grid-area: content; }
                .ns-footer { grid-area: footer; }
            }
        
    

☞ 참고로, grid-template-areas 속성값을 "content image" "footer image" 로 주면; 좌/우 컬럼 위치가 반대로 변경된다. 한편, "image content" "image content" "footer footer" 로 주면; 바닥글이 맨 밑 행으로 분리된다!