Tips : สรุปการใช้งาน CSS Display Grid

บทความนี้ขอบันทึกการใช้งาน Grid CSS เนื่องจากผมใช้ Flex จนเคยชิน บางสถานการณ์ควรใช้ Grid ก็ใช้ Flex หน้าตาเฉย ดังนั้นบทความนี้ ผมรวบรวม Grid CSS property น่าใช้เอาไว้เตือนความจำ


ตัวอย่าง


Comments

Post a Comment

Popular posts from this blog

"yes" "yeah" "yep" เหมือนและต่างกันอย่างไร ?

Image
สวัสดีครับ หลายคนคงปิดเทอมกันอยู่ล่ะสิ แอดมินก็เหมือนกัน กิจกรรมที่น่าทำมากๆตอนปิดเทอม ก็ต้องดูหนังสิครับ ซี่รี่เอย การ์ตูนเอย จัดเต็มกันไปเลย แล้วท่านผู้อ่านเคยสงดูหนังฝรั่งไหมครับ เคยสงสัยไหมว่า Yes ,Yeah ,Yep ,Yup อะไรพวกนี้มันเหมือนกันไหม แตกต่างกันอย่างไร แอดมินก็สงสัยครับ .... จนในที่สุดก็ได้รับคำตอบว่า คำพวกนี้ความหมายเหมือนกันครับ คือแปลว่า "ใช่" ส่วนคำว่า Yeah (ออกเสียงว่า "เย") นั้นมาจากความขี้เกียจของฝรั่งที่ไม่อยากออกเสียง S แต่ก็มีอีกพวกที่ไม่อยากออกเสียง S พวกนี้ใช้ P แทน จึงกลายเป็น Yep หรือ Yup ครับ นอกจากนี้ยังมี Ya คำนี้ส่วนใหญ่จะเห็นในเพลงนะครับ ถามว่าเราควรใช้คำไหน แอดมินคิดว่าตามสะดวกแหละครับ แต่หากจะเป็นทางการหน่อย ก็ใช้ Yes ถ้า Yep ก็จะประมาณว่า "เออ" "อือ" อะไรทำนองนั้น ส่วน Yeah ก็จะเหมือนกับตอนที่เราต้องการพูดว่า "ใช่" แบบ "แมร่งใช่อ่ะ" คือมีอารมณ์ด้วย ลองดูคลิปด้านล่างเป็นตัวอย่างก็ได้ครับ ตอนนี้แอดมินกำลังฝึกภาษาอังกฤษต้อนรับ AEC  อยู่ครับแหะๆ วันนี้ก็เลยพูดเรื่องภาษาอังกฤษ
Read more

ไขรหัสนาซี Enigma แบบง่ายๆ สไตล์เอนจิเนียร์อินดี้ (The Imitation Game)

Image
"Sometimes it's the people no one imagines anything of who do the thing that no one can imagine" "บางครั้งคนที่ถูกมองข้ามไป คือคนที่จะทำในสิ่งที่ยิ่งใหญ่กว่าที่ทุกคนคาดคิด" เปิดด้วยคำคมเด็ดๆจากหนังเรื่อง The Imitation Game  พอดีเพิ่งไปดูมากำลังอินอยู่ แบบสนุกมาก หนังแนวนี้แอดมินจะปลื้มเป็นพิเศษ ตัวหนังเล่าชีวประวัติของ แอลัน ทัวริง นักคณิตศาสตร์ผู้ที่สามารถแกะรหัสเครื่อง Enigma  ของนาซีได้สำเร็จ ถือเป็นส่วนสำคัญที่ทำให้ฝ่ายสัมพันธมิตรชนะสงครามโลกครั้งที่ 2  แต่บล็อกนี้ไม่ได้มาสปอยหนังนะครับ เราจะมาเรียนรู้การทำงานของเจ้า Enigma กัน เล่าก่อนว่ายุคสงครามโลกครั้งที่ 2 ฝ่ายเยอรมันใช้การสื่อสารทางสัญญาณวิทยุเป็นหลัก ข้อดีของมันก็คือ สามารถส่งได้ไกล สะดวกและรวดเร็ว แต่ข้อเสียก็คือ เนื่องจากสัญญาณวิทยุเดินทางผ่านอากาศ ทำให้ใครๆก็สามารถดักฟังข้อมูลได้ ดังนั้นจึงต้องมีการเข้ารหัสก่อนที่จะทำการส่ง Credit :  http://en.wikipedia.org/wiki/Enigma_machine ใช่แล้วครับ เครื่อง Enigma  พระเอกของเราเป็นตัวเข้ารหัสและถอดรหัส รูปทรงคล้ายเครื่องพิมพ์ดีด มี
Read more

รีวิว Dentiste Mastic Mint Bomb เม็ดอมที่ไม่ได้มีดีแค่ความสดชื่น

Image
กลับมาอีกแล้วกับ แอดมินนักรีวิวเซเว่นในตำนาน เหมือนจะหลุดจากวงโคจรของวิศวกรรมไปไกล แต่ก็นั่นแหละ ยังนึกไม่ออกว่าจะเขียนอะไรดี ใครอยากอ่านเรื่องอะไรก็ลองคอมเม้นมาดู ถ้าเขียนได้ จะกลับมาเขียนอย่างจริงจังนะ พูดถึงเม็ดอมที่อยู่ในเซเว่น นั้นมีหลากหลายสายพันธุ์ และเนื่องด้วยแอดมินเป็นแฟนตัวยงของเซเว่น จึงไม่พลาดเลยที่จะต้องแว๊บไปส่องโซนลูกอมเกือบทุกวัน และวันนี้ก็เช่นกันที่แอดมินสะดุดตากับเจ้า.. Dentiste Mastic Mint Bomb บอกเลยว่าใครที่ใช้ยาสีฟันของ Dentiste อยู่ เป็นต้องสะดุดแบบแอดมินแน่นอน ก็ใครจะไปนึกล่ะว่าแบรนด์ยาสีฟันจะหันมาทำเม็ดอมกะเค้าด้วย เออ เอากะเค้าสิ แบบนี้ไม่ลองไม่ได้แล้ว ซองก็ประมาณนี้ เหมือนถุงยางอ่ะ ฮ่าๆๆ ว่าแล้วก็จัดมา 1 กล่องมี 2 ซอง ในซองมี 2 เม็ด หลายคนอาจจะสับสนเหมือนแอดมินว่า Mastic ที่เขียนอยู่บนซอง มันคืออะไร จริงๆแล้วมันคือ Mastic Oil น้ำมันจากต้น Mastic ลองไป Google ดูเอา สรรพคุณของมันคือ ช่วยต้านแบคทีเรียในช่องปาก สาเหตุของการเกิดกลิ่นปากหนะเอง #ความรู้ก็มา ความรู้สึกหลังกินคือ เย็นมาก... เมื่อแอดมินบอกว่ามาก มันคือมาก You know! โดยตั
Read more

วิธีใช้ Google Chrome Extension บน Microsoft Edge (Chromium)

Image
หลังจากที่ย้ายค่ายมาใช้ Microsoft Edge (Chromium) สักพัก รู้สึกประทับใจกับความเร็ว และประสบการณ์การใช้งานที่คุ้นเคย แอดมินแนะนำเลยลองมาใช้ แล้วจะติดใจ บล็อกนี้จะแนะนำวิธีติดตั้ง Extension ที่เคยใช้บน Google Chrome มาลงบนตัว Microsoft Edge กันครับ คลิกปุ่ม Setting มุมขวาบนตามรูป เลือก Extensions  เปิดปุ่มสวิทซ์ Allow extensions from other store ตามรูป จากนั้นไปที่ Chrome Web Store เลือก Extension ที่ต้องการติดตั้ง กดปุ่ม Add to Chrome ตามรูป เท่านี้ก็สามารถใช้งาน Extensions ของ Google Chrome บน Microsoft Edge ได้แล้ว
Read more

ไลน์ไม่อัพเดทเพื่อนจากเบอร์ให้อัตโนมัติ อัพเดทเองก็ได้วะ ลาไอ !!!

Image
สั้นๆล่ะกันโพสนี้ เห็นเพื่อนๆบ่นกันมากว่าแอดเบอร์โทรไปแล้ว แต่ทำไมไลน์ LINE  ไม่ยอมอัพเพื่อนให้อัตโนมัติสักที ต้องรอ รอๆ แล้วก็รอ อันนี้น่าจะเป็นบั๊คของไลน์ หรือไม่ไลน์อาจกำหนดให้อัพเดทเพื่อนอัตโนมัติจากเบอร์โทรตามช่วงเวลา อันนี้เดาเอานะ ทำความเข้าใจกันก่อน สำหรับโปรแกรมยอดฮิต ที่เอาไว้ส่งคุ๊กกี้รันเนี๊ย มันมีความสามารถในการอัพเดทเพื่อนจาก Address Book (เบอร์โทรผู้ติดต่อ) ของเราได้อัตโนมัติ โดยที่มันสามารถตั้งค่าได้ ว่าจะให้อัพเดทอัตโนมัติหรือเปล่า แต่ถ้าไม่ได้ไปเซทอะไร ค่าปกติก็คืออัพเดทให้ อย่างที่บอกไปตอนแรกว่าการอัพเดทอัตโนมัติของไลน์ค่อนข้างมีปัญหา ไม่ว่าจากปัญหาอะไรก็ตาม ทำให้ผู้ใช้ต้องรอระยะเวลาหนึ่ง เพื่อนในไลน์ถึงจะมา วิธีแก้ปัญหานี้ก็คือ LINE สามารถอัพเดทเพื่อนจาก "เบอร์โทรผู้ติดต่อ" แบบ Manual ได้เพียงแค่ไปที่ SETTING เลือก Friends จากนั้นกดปุ่ม Refresh ที่ Last Auto Add มันก็จะเป็นการอัพเดทเพื่อนจากรายการเบอร์โทรศัพท์ให้ทันที เท่านี้ก็เสร็จเรียบร้อย ทีนี้ก็ไม่ต้องรอว่าเมื่อไรมันจะแอดให้อีกต่อไป เท่านี้แหละครับ ฝากไว้อีกอย่างสำหรับชื
Read more