grid เป็น Shorthand Property รวมหลายคุณสมบัติ Grid Container ในบรรทัดเดียว: grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container { displ

grid-row เป็น Shorthand ของ grid-row-start และ grid-row-end ระบุว่า Grid Item เริ่มและจบที่ Row Line ไหน ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container { display: grid; background-color: green; grid-template-columns:

ใช้ linear-gradient() สร้าง Gradient แบบเส้นตรงเป็น Background Image ตัวอย่าง <!DOCTYPE html> <html> <head> <style> #demo { height: 200px; background: linear-gradient(green, orange, maroon); } </style> </head> <bo

ใช้ align-content: space-around กระจาย Flex Lines ให้มีระยะห่างรอบๆ เท่ากัน ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; height: 200px; background-color: #884EA0; align-content: space-

ใช้ align-content: center จัด Flex Lines (หลายบรรทัด) ให้อยู่กึ่งกลาง Cross Axis ของ Container ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; height: 200px; background-color: red; align-

คุณสมบัติ nav-right (ส่วนของ CSS3 UI Module) ระบุ Element ที่จะ Focus เมื่อกดปุ่มลูกศรขวา ตัวอย่าง <!DOCTYPE html> <html> <head> <style> button { position: absolute; } button#btn1 { top: 10%; left: 15%; nav-index

สร้าง Flex Container ด้วย display: flex แล้ววาง Flex Items ไว้ข้างใน ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; background-color: orange; } .mycontainer > div { background-col

ใช้ grid-column-gap, grid-row-gap หรือ Shorthand grid-gap ปรับช่องว่างระหว่าง Grid Tracks grid-column-gap Property ช่องว่างระหว่าง Columns: <!DOCTYPE html> <html> <head> <style> .container { display: grid; background-color: green;

คุณสมบัติของ Flex Items (ลูกของ Flex Container): order — ลำดับการแสดง flex-grow — อัตราการขยายเติมพื้นที่ว่าง flex-shrink — อัตราการหดตัวเมื่อพื้นที่ไม่พอ flex-basis — ขนาดเริ่มต้นก่อน Grow/Shrink flex — Shorthand ของ grow, shrink, basis align-self — จัดแนว Cross Axis แบบแต่ละ Item (Override align-

ใช้ transform: translate(-50%, -50%) ร่วมกับ top: 50% และ left: 50% เพื่อจัดข้อความกึ่งกลางรูปภาพอย่างแม่นยำ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container { position: relative; } .topleft { position: absolute;

ใช้ grid-template-columns กำหนดความกว้างของแต่ละ Column ใน Grid Layout ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container { display: grid; background-color: gray; grid-template-columns: 120px 80px 50px; /* 3 Columns ความก

ใช้ grid-gap (Shorthand ของ grid-row-gap และ grid-column-gap) กำหนดช่องว่างระหว่าง Grid Rows และ Columns ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container { display: grid; background-color: green; grid-template-columns:

ใช้ justify-content: center จัด Flex Items ให้อยู่กึ่งกลาง Main Axis ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; background-color: red; justify-content: center; } .mycontainer >

ใช้ grid-template-rows กำหนดความสูงของแต่ละ Row ใน Grid Container ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container { display: grid; background-color: gray; grid-template-rows: 120px 90px 100px; /* 3 Rows ความสูงต่างกัน

ใช้ grid-column-start ระบุว่า Grid Item เริ่มที่ Column Line ไหน ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container { display: grid; grid-template-columns: auto auto; grid-gap: 10px; background-color: red;

Grid Lines คือเส้นแบ่งของ Grid ประกอบด้วย: Column Lines — เส้นระหว่าง Columns (แนวตั้ง) Row Lines — เส้นระหว่าง Rows (แนวนอน) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .container { display: grid; background-color: green;

ใช้ position: absolute ร่วมกับ top และ left เพื่อจัดตำแหน่งข้อความบนรูปภาพ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .box { position: relative; /* จุดอ้างอิง */ } img { width: 100%; height: auto;

ใช้ flex-direction: row-reverse เรียง Flex Items แนวนอนจากขวาไปซ้าย (Right to Left) ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; flex-direction: row-reverse; background-color: orange; }

ใช้ max-width: 100% และ height: auto ทำให้ Video Player Responsive ไม่เกินขนาดต้นฉบับ ตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1.0> <style> video { max-width: 100%; heigh

นอกจาก Flexbox แล้ว สามารถใช้ Grid Layout Module ออกแบบเว็บด้วย Grid แถวและคอลัมน์ องค์ประกอบของ Grid Layout: Grid Elements — Parent (Container) และ Child (Items) Grid Rows — เส้นแนวนอนของ Grid Items Grid Columns — เส้นแนวตั้งของ Grid Items Grid Gaps — ช่องว่างระหว่าง Rows และ Columns Grid Lines —