요소 옆에 정렬(CSS Grid Layout)
3120 단어 CSS
비망록
이런 어려움을 겪을 때 Grid Layout 기능 사용
CSS Grid Layout이란?
CSS Grid Layout(그리드 레이아웃)은 HTML/CSS를 사용하여 2차원 레이아웃을 쉽고 자유롭게 조작할 수 있는 CSS의 새로운 기능입니다.
격자 모양의 매스 눈 그리드에 원하는 순서대로 배치하거나 결합함으로써 다양한 레이아웃이 가능합니다.
인용자는 여기 (CSS Grid Layout을 극대화!(기초편))
Example
구체적인 예로서 버튼을 옆에 3개 늘어놓았을 때의 실행 결과와 코드를 남긴다.
html 파일을 만들고 코드를 복사하여 확인하십시오.
<!DOCTYPE html>
<html lang="ja">
<style>
#container {
margin-top: 200px;
margin-left: 200px;
display: grid;
grid-template-rows: 50px;
grid-template-columns: 200px 200px 200px;
}
#itemA, #itemB, #itemC{
text-align: center; /*ボタンを中央寄せ*/
}
#itemA{
grid-column: 1 / 2;
}
#itemB{
grid-column: 2 / 3;
}
#itemC{
grid-column: 3 / 4;
}
.btn-square {
display: inline-block;
height: 30px;
width: 70px;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.btn-square:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
}
</style>
<body>
<div id="container"> <!-- コンテナ -->
<div id="itemA"><a href="javascript:void(0)" class="btn-square">BUTTON</a></div> <!-- アイテム -->
<div id="itemB"><a href="javascript:void(0)" class="btn-square">BUTTON</a></div> <!-- アイテム -->
<div id="itemC"><a href="javascript:void(0)" class="btn-square">BUTTON</a></div> <!-- アイテム -->
</div>
</body>
</html>
참고
Reference
이 문제에 관하여(요소 옆에 정렬(CSS Grid Layout)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/youichi_io/items/f7cda77a5a2f00a90288텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
