# css grid

22개의 포스트
post-thumbnail

[React] 리액트로 계산기 만들기

CSS를 사용할때 주로 sass를 썼었다, styled-component도 연습하면서 css grid에 대해서도 공부해보고 싶었다. 뭐가 좋을지 고민하다가 계산기 UI가 떠올랐고 내친김에 구현까지 해보았다.

2022년 8월 6일
·
0개의 댓글
·
post-thumbnail

TIL - CSS flex, grid

Flex(Flexible) : "유연한"display : flexblock 특성의 flex container를 정의flex-direction아이템을 가로정렬 or 세로정렬할지 설정flex-wrapflex-flow : flex-direction값 flex-wrap값;di

2022년 5월 4일
·
0개의 댓글
·
post-thumbnail

CSS Grid 정복하기 - Item편

CSS Grid의 고수가 되어보쟈 😎

2021년 10월 13일
·
0개의 댓글
·
post-thumbnail

CSS Grid 정복하기 - Container편

CSS Grid의 고수가 되어보쟈 😎

2021년 10월 12일
·
0개의 댓글
·
post-thumbnail

CSS GRID 기억하기

display:flex는 유용하게 쓰고있었지만 그동안 grid에 대해서는 관심을 갖지 않았었다. grid만의 장점이 무엇인지 알아보자.1\. display:grid를 적용하면 하위 태그들을 원하는 grid로 조절가능한 준비를한다.2\. columns는 가로 grid를

2021년 3월 16일
·
0개의 댓글
·

07.18~ css grid system[TIL]

css grid는 2차원 레이아웃 시스템이다.CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이라고 한다.grid-template-columns를 이용한 행 만들기grid-template-colu

2020년 7월 18일
·
0개의 댓글
·

[03/07] TIL

flex=>1차원의 요소 배치(한 방향으로만 정렬) / grid=>2차원 요소 배치(x,y축 동시에 정렬 가능)사용법 =>container에 grid줘야.wrapper { display:grid; grid-template-columns:50% 20% 30%;

2020년 3월 6일
·
0개의 댓글
·

[Tutorial] CSS flex & CSS grid

※ 출처: CSS flex※ 출처: CSS grid

2020년 2월 20일
·
0개의 댓글
·

CSS Grid - Quiz

CSS Grid - Quiz

2020년 2월 8일
·
0개의 댓글
·

CSS Grid - Justify, Align, Place Self

CSS Grid - Justify, Align, Place Self

2020년 2월 8일
·
0개의 댓글
·

CSS Grid - grid area

CSS Grid - grid area

2020년 2월 6일
·
0개의 댓글
·

CSS Grid - grid row, row start and end

CSS Grid - grid row, row start and end

2020년 2월 2일
·
0개의 댓글
·

CSS Grid - line naming and grid-auto-flow

CSS Grid - line naming and grid-auto-flow

2020년 2월 1일
·
0개의 댓글
·

CSS Grid - grid column, column start and end

CSS Grid - grid column, column start and end

2020년 1월 30일
·
0개의 댓글
·

CSS Grid - justify items, align items, place items

CSS Grid - justify items, align items, place items

2020년 1월 27일
·
0개의 댓글
·

CSS Grid - justify content, align content, place content

CSS Grid - justify content, align content, place content

2020년 1월 27일
·
0개의 댓글
·

CSS Grid - auto fill and auto fit

CSS Grid - auto fill and auto fit

2020년 1월 26일
·
0개의 댓글
·

CSS Grid - minmax, max-content, min-content

CSS Grid - minmax, max-content, min-content

2020년 1월 23일
·
0개의 댓글
·