Grid를 이용한 column과 row 변환 코드, Bing AI 질문

Bing Chat AI의 답변 화면 캡처

 

grid를 처음 공부하면서 블로그 코드를 변경하고 있는 중입니다.

grid가 flex에 비하여 상당히 복잡합니다. 단기간에 익히기에는 좀 부담이 되어 모르는 부분은 Bing Chat(AI)의 도움을 받으면서 CSS 코드를 작성하고 있습니다.

 

반영하려는 웹 페이지의 디자인은 다음과 같습니다.

 

페이지의 폭이 넓을 때: column + gap + column

페이지의 폭이 좁을 때: row 1개, less than 500px width

 

Bing Ai에 질문합니다.

"How to set grid width, to be full width rows when the full width is less than 500px and to be 40% width 2 columns when the full width is more than 500px"

 

Bing Ai의 답변입니다.

---

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
}

@media (max-width: 500px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

 

In this code, the grid-container class is used to define the grid container. The display: grid property is used to specify that the container is a grid. The grid-template-columns property is used to define the number and size of the columns in the grid. In this case, we are using repeat(2, 1fr) to create two columns with equal width. The grid-template-rows property is used to define the number and size of the rows in the grid. In this case, we are using auto to automatically size the rows based on their content.

The @media rule is used to apply styles based on the screen size. In this case, we are using (max-width: 500px) to apply styles when the screen width is less than 500px. Inside the media query, we are using grid-template-columns: 1fr to create a single column grid.

I hope this helps! Let me know if you have any other questions.

---

위의 코드를 CSS의 기존 코드 일부 수정하면서 그대로 반영하였습니다. ". article-link"는 글 본문이 속하는 카테고리의 관련 글 중에서 이전과 다음 글에 대한 링크를 제시하는 요소입니다.

이 블로그에서는 position sticky를 이용하여 글 본문 하단에 부착하였습니다.

 

.article-link {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	grid-gap: 1px 20%;
	bottom: 2px;
	margin: 0 -14px 16px;
	font-size: smaller;
	z-index: 3;
}

@media screen and (max-width:640px) {
	.article-link {
		/* row width 90% */
		grid-template-columns: 90%;
	}
}

 

grid를 이용한 2 columns 링크 캡처

grid를 이용한 2 rows 링크 캡처

---

코딩할 때 AI 검색 웹사이트를 이용하면, 답변에 자세한 코드 설명까지 덧붙이기 때문에 공부도 하면서 필요한 코드를 즉석에서 얻을 수 있습니다. 난이도가 낮은 코드는 오류 없이 바로 페이지에 적용할 수 있습니다. 

---

※ grid width 오류 해결 사례

- grid container(parent 요소)의 child 요소가 지정된 가로폭을 넘어서 overflow 증상이 발생할 때 사용하는 코드입니다. grid child 요소에 설정합니다.

 

.grid-item-1 {
  min-width: 0px; /* To fix Grid overflow */
}