깔끔한 반응성 수평 거터

Question

Neat 프레임 워크를 사용할 때 열의 거터는 자동으로 창 크기로 조정됩니다 (당연히 그리드 프레임 워크에서 예상 됨). 현재 프로젝트에서 일부 요소에 대해 거터 폭 ($ gutter)을 위쪽 또는 아래쪽 패딩으로 사용하고 싶습니다.

$ gutter 변수를 직접 사용하면보기 포트 크기를 줄일 때 패딩이 조정되지 않습니다.

누구에게도 해결책이 있습니까?

Answer 1

글쎄, 나는이 질문에 너무 빠르다. 나는 깔끔한 코드를 조금 브라우징했고, 분명히 사용했다.

padding: flex-gutter(); 

작품.

이것이 단점이 있다면 누구에게 알 수 있습니까?

편집 : 음, 단점을 발견했습니다. flex-gutter() 또는 버번 함수 패드()를 사용하여 (패딩을 제외하고 동일한 결과) 패딩/여백을 약 2.3 %로 정의합니다. 문제는, 큰 화면에서 그리드를 볼 때, 패딩이 거대해진다는 것입니다 (그리드의 도랑이 최대 25px까지 유지됩니다.)

그래서 나는 내 자신의 최대 마진을 좀 늘리게되었습니다 : 뷰포트가 < 1100px (깔끔한 내 최대 격자 크기) 인 경우

margin-bottom: 25px; 
@media (max-width: 1100px) { margin-bottom: flex-gutter();} 

첫 번째 라인은 최대 마진을 정의하고, 두 번째 줄은 플렉스 거터를 설정합니다.

내가이를 구현할 수 있다면 듣고 싶어요 저음 기능!