การย้ายไอเท็มใน CSS Grid Layout [รายการแนะนำ]
ใช้ โมดูล CSS กริดเค้าโครง ในการออกแบบเว็บไซต์มีความเป็นไปได้มากขึ้นเมื่อเบราว์เซอร์เริ่มต้นมากขึ้น สนับสนุนมัน. ในขณะที่สร้างเลย์เอาต์ที่เติมลงในเซลล์กริดอาจมีบางเวลาที่คุณต้องการบรรลุสิ่งที่ซับซ้อนมากขึ้น.
ตัวอย่างเช่นคุณอาจต้องการ ขยับไปมาเล็กน้อย รายการกริดบางรายการติดอยู่ในพื้นที่กริด คุณอาจต้องการ ย้ายพวกเขาออกจากภาชนะตาราง (ล้น) หรือ มากกว่ากัน (ทับซ้อนกัน) หรือเพียงแค่…ถึงพื้นที่ว่างรอบ ๆ.
ดังนั้นในโพสต์นี้ฉันจะแสดงให้คุณเห็นว่าคุณทำได้ ย้าย, การสั่งซื้อ, ล้น, ทับซ้อนและรายการตารางขนาด เมื่อคุณใช้ CSS Grid Layout Module.
สร้างตาราง CSS
ก่อนอื่นมาสร้างตาราง CSS แบบง่ายๆด้วยกัน หนึ่งแถวและสามคอลัมน์.
ใน HTML เราสร้าง divs จำนวนมากโดยที่กริดคอนเทนเนอร์ มีสามรายการกริด.
ใน CSS ซึ่งเป็นกริดคอนเทนเนอร์ มี จอแสดงผล: ตาราง; คุณสมบัติ และรายการกริด มี ตารางพื้นที่ ที่ระบุชื่อของพื้นที่รายการกริด.
เรายัง เพิ่ม ตารางแม่แบบพื้นที่ คุณสมบัติ ไปยังคอนเทนเนอร์กริดซึ่งใช้ชื่อพื้นที่กริด กำหนดพื้นที่กริดให้กับเซลล์กริดที่พวกเขาเป็นตัวแทน.
คอลัมน์ทั้งหมด ใช้ขนาดของเศษส่วนหนึ่งเ) ของความกว้างตู้คอนเทนเนอร์เพื่อให้แน่ใจว่าการบรรจุของรายการกริด.
.grid-container display: grid; grid-template-พื้นที่: 'ซ้ายกึ่งกลางขวา'; ตารางเทมเพลตคอลัมน์: ทำซ้ำ (3, 1fr); grid-template-rows: 80px; กริดช่องว่าง: 5px; ความกว้าง: 360px; สีพื้นหลัง: สีม่วงแดง; .grid-left พื้นที่ตะแกรง: left; .grid-center grid-area: center; .grid-right กริดพื้นที่: ขวา; .grid-container div background-color: lightgreen;
ล้นตารางรายการ
คุณสามารถสร้างรายการกริด ล้นภาชนะตารางของมัน ถ้าจำเป็นสำหรับเค้าโครง เพื่อให้บรรลุผลล้นคุณเพียงแค่ต้อง ใช้ขนาดคอลัมน์อื่น:
.grid-container display: grid; grid-template-พื้นที่: 'ซ้ายกึ่งกลางขวา'; ตารางเทมเพลตคอลัมน์: ทำซ้ำ (3, 150px); กริดช่องว่าง: 5px;
ผลรวมของขนาดคอลัมน์และช่องว่าง ใหญ่กว่า ความกว้างของภาชนะ, ซึ่งทำให้รายการกริดล้นคอนเทนเนอร์.
รายการตารางที่ทับซ้อนกัน
รายการตารางสามารถทับซ้อนกัน (ครอบคลุมทั้งหมดหรือบางส่วน) รายการกริดอื่น ในกรณีต่อไปนี้:
- มันตั้งค่าเพื่อขยายข้าม (และ) เซลล์ของรายการกริดอื่น.
- ขนาดของมันเพิ่มขึ้นทำให้มันซ้อนทับกับรายการกริดที่อยู่ใกล้เคียง.
- มันย้ายไปอยู่ด้านบนของรายการกริดอื่น.
เราจะหารือเกี่ยวกับกรณีที่สองและสามในภายหลังใน “การกำหนดขนาด” และ “การย้าย” ส่วน.
ก่อนอื่นมาดูกรณีแรกเมื่อรายการกริด ขยายไปทั่วอีกอันหนึ่ง.
รายการกริดที่กึ่งกลางมี ทอดไปทางซ้าย, ดังนั้นจึงเห็นเพียงสองรายการบนหน้าจอ.
.grid-center พื้นที่ตะแกรง: center; กริดคอลัมน์: 1/3;
ตารางคอลัมน์ และ ตารางแถว คุณสมบัติ กำหนดเส้นกริด ระหว่างที่คอลัมน์หรือแถวจำเป็นต้องพอดี.
ในแผนภาพด้านล่างคุณจะเห็นว่า กริดคอลัมน์: 1/3 กฎ CSS ทำงานได้: คอลัมน์กลาง ขยายระหว่างเส้นกริด 1 และ 3. เป็นผลให้คอลัมน์กลางทับซ้ายหนึ่งคอลัมน์.
ย้ายรายการกริด
โดยการย้ายฉันหมายถึง ย้ายรายการไปรอบ ๆ เล็กน้อย. หากคุณต้องการย้ายรายการไปยังเซลล์กริด / พื้นที่อื่นอย่างสมบูรณ์ฉันขอแนะนำให้คุณอัปเดตรหัสการสร้างกริด.
ย้ายไปรอบ ๆ รายการกริดเป็นเรื่องง่าย เพียงแค่ ใช้ ขอบ, แปลง, หรือ ตำแหน่ง: ญาติ; คุณสมบัติ. ดูวิธีย้ายรายการโดยใช้คุณสมบัติเหล่านี้ด้านล่าง.
รายการกลางและขวากริดสามารถเคลื่อนย้ายได้ (ดังที่แสดงด้านบน) ในวิธีต่อไปนี้:
1. การใช้ ขอบ
ระยะขอบติดลบเพิ่มขนาดของรายการกริดในขณะที่ระยะขอบบวกตัดแต่ง ด้วยการใช้ทั้งสองอย่างร่วมกันคุณสามารถเลื่อนรายการกริดไปรอบ ๆ.
.grid-center พื้นที่ตะแกรง: center; ระยะขอบซ้าย: -10px; ระยะขอบขวา: 10px; ระยะขอบบน: -10px; ระยะขอบล่าง: 10px; .grid-right กริดพื้นที่: ขวา; ระยะขอบซ้าย: 10px; ระยะขอบขวา: -10px; ระยะขอบบน: -10px; ระยะขอบล่าง: 10px;
2. การใช้ แปลง
แปล () ฟังก์ชั่น CSS ย้ายองค์ประกอบไปตามแกน x และ y. ใช้งานร่วมกับ แปลง คุณสมบัติช่วยให้คุณเปลี่ยนตำแหน่งของรายการกริด.
.grid-center พื้นที่ตะแกรง: center; แปลง: แปล (-10px, -10px); .grid-right กริดพื้นที่: ขวา; แปลง: แปล (10px, -10px);
3. การใช้ ตำแหน่ง
ใช้ ตำแหน่ง: ญาติ; กฎกับระบุ ด้านบน, ด้านล่าง, ซ้าย, และ ขวา คุณสมบัติสามารถใช้สำหรับการย้ายรอบรายการตารางเช่นกัน.
.grid-center พื้นที่ตะแกรง: center; ตำแหน่ง: ญาติ; ด้านล่าง: 10px; ขวา: 10px; .grid-right กริดพื้นที่: ขวา; ตำแหน่ง: ญาติ; ด้านล่าง: 10px; ซ้าย: 10px;
สั่งซื้อรายการกริด
รายการกริดจะแสดงบนหน้าจอ ตามลำดับที่ปรากฏในซอร์สโค้ด HTML.
ในส่วนก่อนหน้าเมื่อเบราว์เซอร์ย้ายรายการกลางไปวางไว้ที่ด้านบนของรายการด้านซ้ายโดยเบราว์เซอร์ สิ่งนี้เกิดขึ้นเพราะใน HTML, อย่างไรก็ตามเราสามารถ เปลี่ยนรายการในตารางคำสั่งซื้อ ใช้ ใช้ เช่นเดียวกับในโมดูล CSS Grid Layout การเปลี่ยนลำดับองค์ประกอบใน HTML ไม่ส่งผลกระทบต่อเค้าโครงตาราง, คุณยังสามารถใส่ หากคุณใช้แถวหรือคอลัมน์ขนาดอัตโนมัติสำหรับรายการกริด (ใช้ โปรดจำไว้ว่าในตารางตัวอย่างของเราคอลัมน์ทั้งสามนั้นมีค่าเพียงเศษเสี้ยว ( ที่นี่เราเปลี่ยนขนาดของรายการด้านซ้าย ใช้ ที่นี่เราเปลี่ยนขนาดของรายการด้านซ้าย ใช้ ดัชนี z หรือ ใบสั่ง คุณสมบัติ CSS.
ดัชนี z: 1; กฎรายการกริดด้านซ้าย ได้บริบทการซ้อนที่สูงขึ้น.. กริดซ้าย กริดพื้นที่: ซ้าย; ดัชนี z: 1;
ขนาดรายการกริด
รถยนต์, เ, กรัม หน่วย) มันจะย่อขนาดเพื่อให้มีพื้นที่ว่างสำหรับสินค้าใกล้เคียงที่มีขนาดโตขึ้น เพียงแค่ รายการดังกล่าว ไม่ได้ขนาดโดย แปลง หรือกำไรติดลบ.เ) ของคอนเทนเนอร์กริด ลองดูว่าทั้งสามรายการจะมีลักษณะเป็นอย่างไรหลังจากที่มีการปรับขนาดซ้ายในสองวิธีที่แตกต่างกัน.1. ขนาดด้วย
ความกว้าง และ ความสูงความกว้าง และ ความสูง คุณสมบัติ. เป็นผลให้มันอยู่ในภาชนะตาราง.
.กริดซ้าย กริดพื้นที่: ซ้าย; ความกว้าง: 200px; ความสูง: 90px;
2. ขนาดด้วย
แปลงแปลง คุณสมบัติ. เป็นผลให้มันล้นภาชนะและช่องว่างตารางก็หายไป.
.กริดซ้าย กริดพื้นที่: ซ้าย; เปลี่ยนรูป: scalex (1.8);
