CSS Grid กับ Flexbox แตกต่างกันอย่างไร?

CSS Grid สำหรับเลย์เอาต์ 2 มิติ (แถว + คอลัมน์) ส่วน Flexbox สำหรับ 1 มิติ (แถวหรือคอลัมน์) Grid เหมาะกว่าสำหรับเลย์เอาต์หน้าที่ซับซ้อน

หน่วย fr คืออะไร?

fr (fraction) เป็นหน่วยสัดส่วนที่ใช้ใน CSS Grid เช่น 1fr 2fr แบ่งพื้นที่ในอัตราส่วน 1:2 มีประโยชน์มากสำหรับเลย์เอาต์แบบ responsive

สร้างกริดที่ปรับตามหน้าจอโดยไม่ใช้ media query ได้ไหม?

ได้ เพียงเขียน repeat(auto-fit, minmax(240px, 1fr)) คุณก็กำหนดแค่ความกว้างขั้นต่ำของคอลัมน์ แล้วปล่อยให้เบราว์เซอร์คำนวณส่วนที่เหลือ คอลัมน์จะเพิ่มขึ้นเมื่อหน้าจอกว้างขึ้นและลดลงเมื่อแคบลง ครอบคลุมตั้งแต่มือถือถึงเดสก์ท็อปโดยไม่ต้องเขียนเบรกพอยต์เลยสักจุด พึงทราบว่า auto-fill จะทิ้งแทร็กว่างไว้ในพื้นที่ที่เหลือ ขณะที่ auto-fit จะยืดคอลัมน์ที่มีอยู่ให้เต็ม สองค่านี้จึงให้ผลต่างกันเมื่อมีรายการน้อย

คำยาว ๆ ดันคอลัมน์ในกริดจนเลย์เอาต์พัง

เพราะรายการในกริดมีขนาดต่ำสุดเป็น auto โดยค่าเริ่มต้น จึงปฏิเสธที่จะหดลงต่ำกว่าเนื้อหาภายใน URL ยาว ๆ หรือคำที่ตัดไม่ได้เพียงคำเดียวก็ดันคอลัมน์ทั้งคอลัมน์ให้กว้างออก การกำหนด min-width: 0 ให้รายการนั้นจะทำให้กริดหดมันได้อีกครั้ง และการเพิ่ม overflow-wrap: anywhere จะทำให้สตริงยาวขึ้นบรรทัดใหม่ ส่วนการนิยามแทร็กเป็น minmax(0, 1fr) แทน 1fr เปล่า ๆ จะตัดต้นเหตุทิ้งไปเลย จึงเป็นวิธีที่ใช้กันมาก

สร้าง CSS Grid

เครื่องมือสร้าง CSS Grid ออนไลน์ฟรี กำหนดแถว คอลัมน์ และช่องว่างด้วยตัวแก้ไขภาพ สร้างโค้ดเลย์เอาต์อัตโนมัติ คัดลอกทันที

คอลัมน์: 3

แถว: 3

ระยะห่าง: 10px

รายการ: 9

เทมเพลตคอลัมน์

เทมเพลตแถว

จัดแนวนอน

จัดแนวตั้ง

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  justify-items: stretch;
  align-items: stretch;
}

โค้ด HTML

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

lockไฟล์จะไม่ถูกส่งไปยังเซิร์ฟเวอร์

แชร์

ฝัง

ฝังเครื่องมือนี้ในเว็บไซต์ของคุณ

<iframe src="https://tools.patrache.studio/th/css-grid-generator/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="สร้าง CSS Grid — Patrache Studio Tools"></iframe>
<p><a href="https://tools.patrache.studio/th/css-grid-generator/">สร้าง CSS Grid</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

สร้างเลย์เอาต์ CSS Grid แบบเห็นภาพฟรี กำหนดจำนวนคอลัมน์ แถว และระยะห่าง แล้วคัดลอกโค้ด CSS ไปใช้ได้ทันที

สร้าง CSS Grid

วิธีใช้งานสร้าง CSS Grid?

คำถามที่พบบ่อยเกี่ยวกับสร้าง CSS Grid

วิธีใช้สร้าง CSS Gridให้เกิดประโยชน์สูงสุด?

โปรดอนุญาตโฆษณาบนเว็บไซต์นี้

สร้าง CSS Grid

วิธีใช้งานสร้าง CSS Grid?

คำถามที่พบบ่อยเกี่ยวกับสร้าง CSS Grid

วิธีใช้สร้าง CSS Gridให้เกิดประโยชน์สูงสุด?

เครื่องมือที่เกี่ยวข้อง

สร้างเงาเงา

ดูตัวอย่างมุมมน

แนะนำคู่ฟอนต์