본문 바로가기

data life

검색하기
data life
프로필사진 주술회전목마

  • 분류 전체보기 (112)
    • 자격증 (2)
      • 정보처리기사 (2)
    • Front-end (51)
      • JavaScript (31)
      • React (16)
      • TypeScript (2)
    • CSS (22)
      • Flexbox (1)
      • Grid (8)
    • 코딩테스트 (1)
    • 회고록 (4)
    • Back-end (4)
    • Data-Analysis (2)
      • pandas (1)
      • 시각화 (1)
    • python3 (3)
Guestbook
Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags
  • Grid
  • mongodb
  • grid-template-areas
  • scope
  • gird-row-end
  • createElement
  • css#cascading#display#block#inline
  • javascript
  • classList
  • CSS
  • python #qqplot #qq-plot #code
  • grid-row-start
  • grid-column-start
  • variables
  • foreach()
  • confirm()
  • className
  • border-style
  • grid-column-end
  • React
  • javascipt
  • relative
  • collapsing-margins
  • var
  • package.json
  • valuable
  • box-shadow
  • react-hook-form
  • prompt()
  • localStorage
more
Archives
Today
Total
관리 메뉴
  • 글쓰기
  • 방명록
  • RSS
  • 관리

목록grid-row-start (1)

data life

grid 각 셀의 영역 지정

grid 각 셀의 영역 지정 grid-column-start grid-column-end grid-column grid-row-start grid-row-end grid-row Grid 아이템(item)에 적용하는 속성으로, 각 셀의 영역을 지정 Grid 라인 번호를 이용해서 column과 row의 범위를 결정 .grid { display: grid; gap: 10px; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .header { grid-column-start: 1; grid-column-end: 5; /*grid-column: 1 / 5;*/ /*grid-column: 1 / -1;*/ } .cont..

CSS/Grid 2022. 11. 18. 13:37
이전 Prev 1 Next 다음

Blog is powered by kakao / Designed by Tistory

티스토리툴바