Files

T

Antigravity Agent 9148c358d0 docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거

Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를
Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류.

- 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로
  자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거,
  동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거.
- 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming,
  Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business,
  Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로,
  나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는
  title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백).
  원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지.
- 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서.
- 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는
  지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지.
- Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경.
- 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.

2026-07-05 00:33:48 +09:00

4.2 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

CSS Grid

매 한 줄

"매 2D layout 의 native primitive". CSS Grid 매 row + column 동시 control 의 layout system — 매 Flexbox 의 1D 보완. 매 2026 현재 매 모든 modern browser 매 stable, 매 subgrid + masonry (experimental) 까지 지원, 매 page-level 부터 component-level 까지 default tool.

매 핵심

매 모델

Grid container (display: grid) — 매 parent.
Grid items — 매 direct children, 매 line-based positioning.
Tracks — rows + columns, 매 fr unit (fractional space) + minmax() + auto.
Areas — 매 named regions, 매 semantic layout description.

매 vs Flexbox

Grid: 매 2D (row + column 동시), 매 layout-first (parent decides).
Flexbox: 매 1D (single axis), 매 content-first (children sizing).
매 함께 mix — 매 outer Grid + inner Flex 매 common.

매 응용

Page layout (header / sidebar / main / footer).
Card grid 매 responsive (auto-fill + minmax).
Dashboard 매 named-area complex layout.
Image gallery 매 masonry.

💻 패턴

Holy Grail layout

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  min-height: 100vh;
}
.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

Responsive card grid (`auto-fill`)

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

Subgrid (nested alignment)

.outer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card {
  display: grid;
  grid-template-rows: subgrid;  /* inherit parent row tracks */
  grid-row: span 3;
}

Line-based placement

.item {
  grid-column: 2 / span 3;  /* col 2 to 4 */
  grid-row: 1 / -1;          /* full height */
}

Masonry (2026 experimental)

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: masonry;  /* Firefox + Safari TP */
  gap: 8px;
}

Implicit grid + `dense` packing

.feed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;       /* fill holes */
  grid-auto-rows: 100px;
}
.feed > .featured {
  grid-column: span 2;
  grid-row: span 2;
}

매 결정 기준

상황	Approach
Page-level 2D layout	Grid
Component 매 1D row/column	Flex
Aligned nested grids	Grid + subgrid
Dynamic content count, fluid wrap	Grid `auto-fill`
Dense irregular packing	Grid `auto-flow: dense`

기본값: 매 layout-first 결정 — Grid. 매 content-first sizing — Flex.

🔗 Graph

부모: Layout
변형: Flexbox · Subgrid · 컨테이너 쿼리 (Container Queries)
응용: Responsive Design
Adjacent: CSS Grid 및 Flexbox

🤖 LLM 활용

언제: 2D layout, named areas semantic intent, responsive 매 auto-fill. 언제 X: 1D 매 simple row of buttons — Flexbox 가 더 ergonomic.

❌ 안티패턴

모두 1D 에 Grid 매 사용: 매 Flex 보다 verbose.
Pixel-only tracks: 매 fr + minmax 매 사용 — 매 fluid.
!important 으로 children 매 overriding: 매 grid-area 매 misaligned signal.
Subgrid 매 ignore: nested grids 매 line-up 가 필요할 때 매 subgrid 가 정답.

🧪 검증 / 중복

Verified (MDN CSS Grid Layout 2026, CSS Working Group Level 3).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Grid 2D layout + subgrid + masonry + responsive patterns

4.2 KiB Raw Blame History