# fr
CSS-grid(2)
Grid Template block 요소는 width와 height이 주어져 있지 않을 경우, width는 최대값으로 heigthdms '0'으로 표현된다. 따라서, grid container에 height값을 지정해 줘야한다. 가변 그리드 fr 단위를 포함한 가변 그리드. 길이와 백분율을 사용하여 그리드를 생성하는 것 외에도 fr 단위를 사용하여 그리드 행과 열을 가변적으로 조정할 수 있다. 동 단위는 그리드 컨테이너 내부에 사용 가능한 공간에서 한 개의 분할 부분과 같다. 트랙 목록을 다음과 같이 정의로 변경하여, 세 개의 1fr 트랙을 생성한다. >fr = fraction(부분) gird에서 사용 가능한 공간을 뜻하며 fr값 비율로 공간을 나눈다. 적용 예) [Pla
fr(fraction) CSS - grid 정리
CSS - grid 공부중에, 1fr단위가 많이 나오던데, 헷갈려서 정리를 해보고자 한다. 백분율로 크기 나누기 먼저 내가알던 %를 구현해보면 4개 div블럭을 꽉채워 넣고싶으면, 4 / 100 = 25로 각 width값을 25로 넣어주면 된다. 그러나, 매번 계산해아되는 귀찮음이 있다. 또한, 3개 div블럭이라면, 3 / 100 = 33.33333..... 처럼 딱 떨어지지
CSS 기초 - 생활코딩
기본으로 h1 은 전체 사용 block element, a 태그는 inline element. 하지만, 이나 으로 설정변경 가능 grid 설정코드(세로:columns) 전체 가로길이를 나눠 간단히 사용. 은 2대 1 비율. 
CSS grid layout
🎐 CSS grid layout 컨테이너를 지정하는 display 속성 |종류|설명| |----|:----| |grid|컨테이너 안의 항목을 블록 레벨 요소로 배치 |inline-grid|컨테이너 안의 항목을 인라인 레벨 요소로 배치 상대적인 크기를 지정하는 fr 단위 그리드 레이아웃에서 칼럼이나 줄의 크기를 지정할 때 px을 이용하면 항상 크리가 고정되므로 반응형 웹 디자인에는 적합하지 않다. 그래서 그리드 레이아웃에서는 상대적인 크기를 지정할 수 있도록 fr 단위를 사용한다 . 예를 들어 너비가 같은 칼럼을 3개 배치한다면 fr 단위를 사용해 다음과 같이 지정한다. > grid-template-columns: 1fr 1fr 1fr; 또는 칼럼을 2:1:2 로 배치하고 싶으
그리드 소개
🚁 그리드 소개 그리드 소개 image [
20200318 TIL
Grid grid box 에서 grid-template-column 에 대한 속성중 auto-fill은 해당 공간에서 반드시 컬럼수를 유지할 필요가 없을 경우, 반응형으로 변화하게 하기위해 사용. 보통 Repeat에 같이 사용함. mixmax는 이름 그대로 최솟값, 최댓값을 정하는 속성이다. 여기서 1fr 는 공간단위를 말한다고 한다. auto-fill이 공간 축소 시에 같이 content가 줄어드는 반면, auto-fit은 content는 그대로인 상태로 view만 줄이게 된다. ㅁ ㅁ ㅁ ㅁ ㅁ 의 구조로 있을 경우 auto-fill은 ㅁㅁㅁㅁㅁ이 된다는 것이고 auto-fit은 ㅁ ㅁ ㅁ (ㅁ ㅁ) 처럼 나타나게되어 괄호 안에 있는 content는 잘려서 보이게 된다. fr(fraction) 그리드 컨테이너 내의 공간 비율을 분수(fraction)로 나타냅니다. → 남은 공간을 기준으로 얼만큼 할당할 것인지를 나타냄.
CSS Grid - fr and repeat
2fr 1fr 2fr 1fr.png repeat 3 1fr .png repeat 5 1fr.png ![repeat 3 1fr 4fr.png](https://images.velog.io/post-images/qkrcndtlr123/97888770-3cf6-11ea-ada5-7f693c0b581e/repeat-