นี่คือ 3 วิธีใช้ CSS วาง HTML div elements ติดกัน
(คลิกเพื่อกระโดดไปแต่ละส่วน)
- Float Method
- Flexbox Method
- CSS Grid Method
Float Method
ใน Float Method เราจะใช้ HTML Markup ดังนี้:
<div class="float-container"> <div class="float-child"> <div class="green">Float Column 1</div> </div> <div class="float-child"> <div class="blue">Float Column 2</div> </div> </div>.float-container คือ parent element ที่ contain ทั้งสอง .float-child
เพื่อให้ div ติดกัน ใช้ CSS Rules ดังนี้:
.float-container { border: 3px solid #fff; padding: 20px; } .float-child { width: 50%; float: left; padding: 20px; border: 2px solid red; } โค้ดผลลัพธ์:
เพิ่ม border และ padding เพื่อดูโครงสร้างชัดเจน Border สีขาวหนานอกสุดคือ .float-container div ที่มี padding 20px
แต่ละ .float-child มี border แดงบางกว่าและ padding เพิ่ม บล็อกสีจริงเป็น child elements ของ .float-child (จะเห็นเหตุผลในไม่ช้า)
ใช้ property float ลอยแต่ละ .float-child ไปซ้าย
เพราะทั้งคู่อยู่ซ้าย จะแสดงติดกันหากมีพื้นที่พอ พอดีเพราะมี .float-child 2 ตัว แต่ละตัว 50% width
ช่องว่างระหว่าง div สร้างโดยเพิ่ม padding ในแต่ละ .float-child div ซึ่ง contain บล็อกสี
เพิ่มช่องว่างระหว่างคอลัมน์ด้วยการ nest แต่ละคอลัมน์ใน outer div
จำเป็นต้องมี outer div (.float-child) ห่อบล็อกสี เพื่อเพิ่มช่องว่างและให้ทั้งสองบล็อกพอดีติดกัน
ถ้าเราไม่มี padding ใน .float-child แต่พยายามเพิ่มช่องว่างด้วย margin-right บนบล็อกแรกแบบนี้?
HTML:
<div class="float-container"> <div class="float-child green"> Float Column 1 </div> <div class="float-child blue"> Float Column 2 </div> </div> CSS:
.float-child.green { margin-right: 20px; }ในกรณีนี้ ทั้งสอง .float-child กิน 50% ความกว้างรวม แตบล็อกสีเขียวแรกก็มี margin 20px
หมายถึงทั้งสองบล็อกกิน 50% + 20px + 50% ความกว้าง มากกว่า 100% 20px ไม่มีที่พอให้ติดกัน
บล็อกสีน้ำเงินที่สองจะ wrap ไปแถวถัดไปใต้บล็อกแรก และ float ซ้ายที่นั่น:
คุณอาจลองปรับ width เป็น 48% หรือค่าน้อยกว่า 50% เพื่อให้พอดี แต่จะไม่แม่นยำ
ที่ผมชอบห่อบล็อกใน outer div ตั้ง 50% width พร้อม padding เพื่อช่องว่าง
ปัจจุบัน วิธีใหม่ๆ ใน CSS วาง div ติดกันง่ายกว่า Float มาก
มาดู Flexbox Method!
Flexbox Method
ด้วย Flexbox เราจัดเรียง div สองตัวได้อย่าง直覺 (intuitive)
HTML:
<div class="flex-container"> <div class="flex-child magenta"> Flex Column 1 </div> <div class="flex-child green"> Flex Column 2 </div> </div> CSS:
.flex-container { display: flex; } .flex-child { flex: 1; border: 2px solid yellow; } .flex-child:first-child { margin-right: 20px; } กับ Flexbox เราตั้ง display: flex บน parent .flex-container element เปิด Flexbox
ในแต่ละ .flex-child ตั้ง flex: 1 ตัวเลขนี้เป็นอัตราส่วนเปรียบเทียบความกว้างของแต่ละ child ใน parent flex
เพราะเท่ากัน พื้นที่ว่างจะแบ่งเท่ากัน และมี child 2 ตัว แต่ละตัวกิน 50%
ผลลัพธ์:
เพิ่มช่องว่างระหว่าง Div ด้วย Margin และยังพอดี!
สังเกตว่าเราเพิ่มช่องว่างด้วย margin-right: 20px ให้แค่ .flex-child ตัวแรก แต่ Flexbox ฉลาดพอที่จะคำนวณ 20px เพิ่มเติมนั้นเมื่อแบ่งพื้นที่ว่างที่เหลือ
หมายถึงคุณเพิ่มช่องว่างด้วย margin ได้โดยไม่ต้องคำนวณพิกเซลแน่นอน Flexbox จัดการให้พอดี!
นี่คือเหตุผลที่ผมชอบ Flexbox
อย่างไรก็ตาม หากมีหลาย element ที่ต้องการ layout เป็น responsive grid คุณไม่รู้ว่าต้องเพิ่มช่องว่างตรงไหน
ในกรณีนี้ หากต้องการ stack สอง div ซ้อนกันสำหรับ Mobile ต้องเอา margin-right ออกสำหรับ Mobile widths
หรือเพิ่ม outer element พร้อม padding ให้แต่ละ .flex-child คล้าย Float Method
ไม่ได้ 100% intuitive แต่ยังทำงานได้ หากต้องการ responsive layouts ซับซ้อนกับ Flexbox ต้องคำนึงถึงเรื่องนี้
มาดูวิธีใหม่ที่สุด: CSS Grid
CSS Grid Method
วิธีวาง div สองตัวติดกันด้วย CSS Grid:
HTML:
<div class="grid-container"> <div class="grid-child purple"> Grid Column 1 </div> <div class="grid-child green"> Grid Column 2 </div> </div>CSS:
.grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; }ผลลัพธ์:
การเปลี่ยนแปลงใหญ่กับ Grid คือ ก่อนหน้ากำหนด Grid Template จะเป็นอย่างไร คือ ต้องการคอลัมน์/แถวเท่าไหร่ใน Layout
ในกรณีนี้ ต้องการ 2 คอลัมน์เท่ากัน ใน parent .grid-container เปิด Grid ด้วย display: grid เพิ่มจำนวนคอลัมน์ด้วย property grid-template-columns
ต้องการ 2 คอลัมน์เท่ากัน ตั้งเป็น 1fr 1fr บอกเบราว์เซอร์สร้าง Layout 2 คอลัมน์ แต่ละคอลัมน์กิน 1fr (fr = fractional unit) พื้นที่
หน่วย fr เป็นอัตราส่วนของคอลัมน์ต่ออีกคอลัมน์ คล้าย flex: 1 ใน Flexbox Method 1fr 1fr หมายถึงแต่ละคอลัมน์กินพื้นที่เท่ากัน
เพิ่มช่องว่างระหว่าง Grid Items ด้วย Grid Gap Property
ประโยชน์ใหญ่ของ CSS Grid คือ ไม่ต้องใช้ padding หรือ margin เพื่อช่องว่างระหว่าง Grid Items
ใช้ grid-gap (หรือ gap ในเบราว์เซอร์ใหม่) เพื่อเพิ่มช่องว่างใน Grid Template อัตโนมัติ
เราตั้ง grid-gap 20px เบราว์เซอร์จะเพิ่มช่องว่าง 20px ระหว่างทุก items ไม่ว่าจะติดกันหรือ stack
และคุณอาจสังเกต CSS Properties สำหรับ Grid ตั้งหมดบน parent .grid-container ไม่ได้เขียน CSS ให้ child .grid-child เลย!
