มาทำความรู้จัก grid-template-columns ใน CSS Grid กัน

CSS Grid เป็น tool ที่ใช้สำหรับสร้าง Layout บน Web `grid-template-columns` นั้นก็เป็น Property หนึ่งของ CSS Grid layout ซึ่งสามารถที่จะระบุ size position ของ columns ใน grid container ได้

มาลองเล่นกัน

• เราต้องการที่จะแสดงข้อมูลที่มี 3 columns สำหรับตัวอย่างนี้จะให้กว้างเต็มหน้าจอเลย และถ้ามีข้อมูลมากกว่านั้นก็ให้ไปอยู่ใน row เลย

const GridContainer = () => {
    const data = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 4", "Item 5", "Item 6", "Item 7"]

    return <>
        <div className="gridContainer">
            {data && data.map((item) => (<div className="gridItem">{item}</div>))}
        </div>
    </>
}

export default GridContainer;

.gridContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.gridItem {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

จากโค้ต

• เรามีการสร้าง container div และจะใช้ class name `gridContainer` เพื่อระบุข้อมูลที่อยู่ใน container นั้นว่าจะให้แสดงแบบไหน
• fr เป็นหน่วยที่ใช้ใน CSS Grid Layout และเอาไว้กำหนด Grid tracks ซึ่ง Grid tracks นั้นมันจะถูก refer ถึง row หรือ columns ที่เราสร้างขึ้นโดยการกำหนด grid ที่เราใช้ใน property ที่จะชื่อ grid-template-columns หรือ grid-template-rows นั่นเอง ซึ่งทำให้ง่ายต่อการสร้าง Layout responsive
• ใน class name `gridContainer` จะให้ข้อมูลแสดงเป็น grid และใช้ grid-template-columns เพื่อมาระบุว่าจะให้แสดงกี่ columns ใน container นั้น ซึ่งในตัวอย่างนั้น grid-template-columns ระบุว่า 1fr 1fr 1fr สามอันนั้นคือ เราจะบอกว่าให้ Grid สร้าง 3 columns ให้หน่อย
• ใน div ที่มี class name `gridItem` ซึ่งจะเป็นการกำหนด item ข้างในล่ะ อันนี้ก็แล้วแต่ต้องการเลยว่าอยากได้อะไรบ้าง

ถ้าเราลองมาเปลี่ยน `grid-template-columns: 1fr 3fr 1fr;` เป็นแบบนี้ซึ่งหมายความว่าเราต้องการให้ columns ตรงกลางกว้างสามเท่า ดังในภาพนี้

นอกจากนี้เรายังสามารถระบุความกว้างของ columns `grid-template-columns` เพื่อกำหนด position และ size ของ Grid ได้ ซึ่งเราให้เราเลือกใช้งานตามความต้องการ

• Absolute lengths ที่จะคุ้นๆ px หรือ em
• Relative lengths ที่จะคุ้นๆ % หรือ vw
• Fractional units ที่จะคุ้นๆ fr

ต่อมาเราลองมาใช้ px ใน grid-template-columns โดยเราจะเปลี่ยน colums หลังสุดให้มีขนาดแค่ 100px ลองเขียนใหม่แบบนี้ `grid-template-columns: 1fr 1fr 100px; ` หน้าจอที่ได้ก็จะเป็นแบบนี้

repeat ใน grid-template-columns จะเป็น function ที่ทำซ้ำในรูปแบบที่เราระบุ เช่น เราจะลองเปลี่ยน css เป็น `grid-template-columns: repeat(3, 1fr);` ซึ่งหมายความว่า ให้สร้าง 3 columns ที่มีความกว้างเท่ากัน แต่ละ columns ใช้พื้นที่ 1 ในสามของพื้นที่มีอยู่ ตัวอย่างก็จะออกเหมือนกับรูปแรกเลย

จบแล้ว เจอกันบทความต่อไป

ถ้าผิดพลาดตรงไหนหรือว่ามีคำแนะนำสามารถบอกได้เลยย