Wrikka Learn

Layout & Grids in Modern UI Design ​

การจัดวาง Layout และ Grids เป็นพื้นฐานสำคัญในการสร้างโครงสร้างที่สม่ำเสมอและใช้งานได้ดีในทุกอุปกรณ์

ประเภทของ Layout ​

1. Fixed Layout ​

css
.container {
  width: 1200px;
  margin: 0 auto;
}
  • มีขนาดคงที่
  • เหมาะสำหรับหน้าจอขนาดเดียวกัน
  • ใช้หน่วย px

2. Fluid Layout ​

css
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
  • ขยายตามขนาดหน้าจอ
  • เหมาะสำหรับหน้าจอหลายขนาด
  • ใช้หน่วย % และ max-width

3. Responsive Layout ​

css
.container {
  width: 100%;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }
}
  • ปรับเปลี่ยนตามขนาดหน้าจอ
  • ใช้ Media Queries
  • เหมาะสำหรับทุกอุปกรณ์

Grid System Essentials ​

1. Columns ​

css
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
  • แนวตั้ง
  • ใช้แบ่งพื้นที่
  • ใช้ CSS Grid หรือ Flexbox

2. Rows ​

css
.grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
  • แนวนอน
  • ใช้จัดเรียงเนื้อหา
  • กำหนดความสูงของแถว

3. Gutters ​

css
.grid {
  display: grid;
  gap: 20px; /* ทั้ง row-gap และ column-gap */
}
  • ช่องว่างระหว่าง Columns และ Rows
  • ใช้ gap property
  • ช่วยสร้างความโปร่งสบายตา

หลักการออกแบบ Layout ​

1. ความสมดุล (Balance) ​

css
.layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
  • สร้างความสมดุลทางสายตา
  • ใช้สัดส่วนที่เหมาะสม

2. ความสม่ำเสมอ (Consistency) ​

css
:root {
  --gutter: 20px;
  --max-width: 1200px;
}
  • ใช้ชุดค่าที่สม่ำเสมอ
  • ใช้ CSS Variables

3. ความเป็นระเบียบ (Order) ​

css
.grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
  • จัดลำดับความสำคัญ
  • ใช้ Grid Areas

4. ความสำคัญ (Hierarchy) ​

css
.primary {
  grid-column: span 2;
}

.secondary {
  grid-column: span 1;
}
  • สร้างลำดับชั้น
  • ใช้ขนาดและตำแหน่งที่แตกต่าง

Best Practices ​

  • ใช้ Grid System ที่เหมาะสม
  • ทดสอบกับหลายอุปกรณ์
  • ใช้ CSS Variables สำหรับค่าที่ใช้บ่อย
  • ปรับปรุงตาม Feedback

เครื่องมือช่วยสร้าง Layout ​

1. CSS Frameworks ​

2. Grid Generators ​

3. Responsive Testing Tools ​

ทรัพยากรเพิ่มเติม ​

"Design is not just what it looks like and feels like. Design is how it works." - Steve Jobs