วิธีรวม Flexbox และ CSS Grids เพื่อเค้าโครงที่มีประสิทธิภาพ

หมายเหตุบรรณาธิการ: แขกรับเชิญนี้เขียนโดย Abbey Fitzgerald วิศวกรซอฟต์แวร์ UX และนักออกแบบเว็บไซต์ผู้ชื่นชอบศิลปะการสร้างโค้ด

ในอดีต คุณสมบัติ Float ของ CSS เป็นหนึ่งในวิธีหลักในการจัดเรียงองค์ประกอบบนเว็บไซต์ และถ้าคุณเคยทำงานแบบนั้นมาก่อน คุณจะรู้ว่ามันไม่เหมาะกับเค้าโครงที่ซับซ้อนเสมอไป โชคดีที่ในยุคสมัยใหม่ของการออกแบบเว็บ การจัดองค์ประกอบให้เป็นระเบียบมีความคล่องตัวมากขึ้นด้วย Flexbox และ CSS Grids

เมื่อ Flexbox เข้ามา ทำให้การจัดตำแหน่งง่ายขึ้นมาก และตั้งแต่นั้นมาก็ถูกนำมาใช้อย่างแพร่หลาย CSS Grid Layouts ได้สร้างความตื่นเต้นอย่างมากในชุมชนการออกแบบเว็บไซต์ ก่อนหน้านี้เราได้ดูวิธีสร้าง CSS Grid Layout พื้นฐาน แม้ว่าจะไม่ได้รับการนำไปใช้อย่างแพร่หลาย แต่เบราว์เซอร์ก็เริ่มให้การสนับสนุน เมื่อรองรับอย่างสมบูรณ์ สิ่งนี้จะมีผลอย่างมากต่อการออกแบบ การสนับสนุนเบราว์เซอร์เพิ่มขึ้นตลอดเวลา อย่าลืมตรวจสอบ Can I Use เพื่อรับข้อมูลล่าสุด

ตอนนี้คุณอาจสงสัยว่าจะเกิดอะไรขึ้นต่อไป ท้ายที่สุดแล้ว Flexbox และ CSS Grid Layouts ดูเหมือนจะได้ผลลัพธ์ที่คล้ายกัน ไม่ใช่การโต้วาทีระหว่าง Flexbox กับ Grid แต่เป็นการเรียนรู้วิธีใช้งานร่วมกันมากกว่า ยิ่งฉันได้ทดลองกับทั้ง Grid และ Flexbox มากเท่าไหร่ ฉันพบว่าคุณไม่จำเป็นต้องเลือกอย่างใดอย่างหนึ่ง ในอนาคตอันใกล้นี้ เมื่อ CSS Grid Layouts มีการรองรับเบราว์เซอร์อย่างเต็มรูปแบบ นักออกแบบจะสามารถใช้ข้อดีของแต่ละอย่างรวมกันและสร้างการออกแบบที่มีประสิทธิภาพและน่าสนใจที่สุด

การทดสอบ Basic Flexbox และ CSS Grid Layouts

ในการตรวจสอบว่า Flexbox หรือ CSS Grid ทำงานได้ดีขึ้นสำหรับเวิร์กโฟลว์การพัฒนาของคุณหรือไม่ การสร้างเลย์เอาต์มาตรฐานที่ใช้เพียงอย่างใดอย่างหนึ่งเป็นวิธีที่ดีในการดูวิธีการทำงานและดูว่ามีข้อดีของแบบอื่นหรือไม่ เราจะเริ่มต้นด้วยรูปแบบเค้าโครงที่เรียบง่ายและคุ้นเคยเป็นอย่างดี โดยมีส่วนหัว แถบด้านข้าง เนื้อหาหลัก และส่วนท้าย เลย์เอาต์ที่เรียบง่ายเช่นนี้เป็นวิธีที่รวดเร็วในการจัดตำแหน่งองค์ประกอบต่างๆ

และจำไว้ว่าคุณไม่ควรทำการเปลี่ยนแปลงบนไซต์จริงของคุณ ลองทดลองใช้ Local แทน ซึ่งเป็นแอปพัฒนา WordPress ในพื้นที่ฟรี ดาวน์โหลดได้แล้ววันนี้!

วิธีสร้างเค้าโครงด้วย Flexbox

เมื่อเร็ว ๆ นี้ ฉันได้พูดคุยเกี่ยวกับการสร้างเลย์เอาต์การ์ด Flexbox โพสต์นั้นลงรายละเอียดเกี่ยวกับวิธีที่ Flexbox ทำงานร่วมกับข้อมูล CSS เฉพาะ ดังนั้นหากคุณเพิ่งเริ่มใช้ Flexbox ก็จะช่วยให้คุณคุ้นเคยกับวิธีการทำงาน

สำหรับบทช่วยสอนนี้ นี่คือสิ่งที่เราจะสร้าง:

ดูสิ่งนี้ใน Codepen

สำหรับเค้าโครงพื้นฐานนี้ งานหลักของ Flexbox ได้แก่:

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

โครงสร้าง HTML พื้นฐาน

 <div class="คอนเทนเนอร์">
        
    <ส่วนหัว>
        <นำทาง>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <ปุ่ม></ปุ่ม>
    </ส่วนหัว>
    <div class="wrapper">
        <ข้าง class="sidebar">
            <h3></h3>
        </ข้าง>
        <ส่วน class="main">
            <h2></h2>
            <p></p>
        </section>
    </div><!-- /wrapper -->
    <ส่วนท้าย>
        <h3></h3>
        <p></p>
    </footer>
</div><! -- /คอนเทนเนอร์ -->

วิธีใช้จอแสดงผลแบบยืดหยุ่น

รูปแบบส่วนหัว

เริ่มจากด้านนอกและด้านใน เพิ่ม display: flex; ไปยังคอนเทนเนอร์เป็นขั้นตอนแรกในเค้าโครง Flexbox ทิศทางแบบยืดหยุ่นถูกตั้งค่าเป็นคอลัมน์ ดังนั้นสิ่งนี้จะวางตำแหน่งทุกส่วนไว้ข้างกัน

 .คอนเทนเนอร์ {
    จอแสดงผล: ดิ้น;
    ทิศทางโค้งงอ: คอลัมน์;
}

การสร้างส่วนหัวแบบเต็มความกว้างนั้นค่อนข้างอัตโนมัติด้วย display: flex; (ส่วนหัวเป็นองค์ประกอบระดับบล็อกตามค่าเริ่มต้น) เนื่องจากการประกาศนี้จะช่วยให้สามารถจัดวางองค์ประกอบการนำทางได้ง่าย

มีโลโก้และรายการเมนูสองรายการในการนำทางทางด้านซ้ายพร้อมปุ่มเข้าสู่ระบบทางด้านขวา nav อยู่ในส่วนหัวดังนั้นโดยมี justify-content: space-between; การนำทางและปุ่มจะถูกเว้นระยะโดยอัตโนมัติ

สิ่งหนึ่งที่สะดวกคือความง่ายในการจัดข้อความ ในการนำทาง ด้วย align-items: baseline; รายการการนำทางทั้งหมดจะจัดชิดกับเส้นฐานของข้อความเพื่อให้ดูเป็นเนื้อเดียวกันมากขึ้น

 หัวข้อ{
    ช่องว่างภายใน: 15px;
    ขอบล่าง: 40px;
    จอแสดงผล: ดิ้น;
    ปรับเนื้อหา: ช่องว่างระหว่าง;
}
ส่วนหัว nav ul {
    จอแสดงผล: ดิ้น;
    จัดรายการ: พื้นฐาน;
    สไตล์รายการ: ไม่มี;
}

การจัดรูปแบบเนื้อหาของเพจ

ถัดไป มีพื้นที่แถบด้านข้างและเนื้อหาหลักพร้อมกระดาษห่อที่มีทั้งสองส่วน div ที่มีคลาสเป็น .wrapper ยังต้องการ display: flex; แต่ทิศทางการโค้งงอแตกต่างจากด้านบน เนื่องจากแถบด้านข้างและพื้นที่เนื้อหาอยู่ติดกันแทนที่จะวางซ้อนกัน ทิศทางแบบยืดหยุ่นจึงเป็น

ถัดไป มีพื้นที่แถบด้านข้างและเนื้อหาหลักพร้อมกระดาษห่อที่มีทั้งสองส่วน div ที่มีคลาสเป็น .wrapper ยังต้องการ display: flex; แต่ทิศทางการโค้งงอแตกต่างจากด้านบน เนื่องจากแถบด้านข้างและพื้นที่เนื้อหาอยู่ติดกันแทนที่จะวางซ้อนกัน ทิศทางแบบยืดหยุ่นจึงเป็นแถว ซึ่งตรงกันข้ามกับสิ่งที่ทำในคอนเทนเนอร์ด้านบน

 .wrapper {
    จอแสดงผล: ดิ้น;
    ทิศทางโค้งงอ: แถว;
} 

ขนาดของส่วนหลักและแถบด้านข้างมีความสำคัญมาก เนื่องจากข้อมูลที่โดดเด่นกว่าอยู่ที่นี่ เนื้อหาหลักควรมีขนาดสามเท่าของแถบด้านข้าง ซึ่งทำได้ค่อนข้างง่ายด้วย Flexbox

 .หลัก {
    ดิ้น: 3;
    ขอบขวา: 60px;
}
.แถบด้านข้าง {
   ดิ้น: 1;
}

สำหรับข้อมูลโค้ดนี้ ฉันใช้ชวเลข ค่า Flex ใช้สำหรับคุณสมบัติ Flex-Grow Flex-grow มีประสิทธิภาพเพราะนี่คือจำนวนไอเท็มที่จะเติบโตเมื่อเทียบกับไอเท็มที่เหลือที่ยืดหยุ่นภายในคอนเทนเนอร์เดียวกัน

โดยรวมแล้ว Flexbox ค่อนข้างมีประสิทธิภาพในการสร้างเลย์เอาต์ที่เรียบง่ายนี้ การควบคุมสไตล์ของรายการและการเว้นวรรคระหว่างการนำทางและปุ่มจะมีประโยชน์อย่างยิ่ง

วิธีสร้างเลย์เอาต์ด้วย CSS Grid Layouts

เพื่อทดสอบประสิทธิภาพ ขั้นตอนต่อไปคือการสร้างเค้าโครงพื้นฐานเดียวกันกับ CSS Grid องค์ประกอบของหน้าจะเหมือนกันทั้งหมด และจะวางตำแหน่งแบบเดียวกับตัวอย่าง Flexbox

ดูสิ่งนี้ใน Codepen

พื้นที่เทมเพลตกริด

สิ่งหนึ่งที่สะดวกสำหรับ CSS Grid คือความสามารถในการระบุพื้นที่เทมเพลต ซึ่งจะทำให้การกำหนดเค้าโครงเป็นเรื่องง่ายมาก เมื่อใช้วิธีการนี้ พื้นที่บนกริดสามารถตั้งชื่อและอ้างอิงไปยังรายการตำแหน่งได้ สำหรับเค้าโครงพื้นฐานนี้ มีสี่รายการที่เราจะต้องตั้งชื่อ:

• หัวข้อ
• เนื้อหาหลัก
• แถบด้านข้าง
• ส่วนท้าย

โครงสร้าง HTML พื้นฐาน

 <div class="คอนเทนเนอร์">
        
    <ส่วนหัว>
        <นำทาง>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </nav>
        <ปุ่ม></ปุ่ม>
    </ส่วนหัว>
  
    <ข้าง class="sidebar">
        <h3></h3>
        <ul>
            <li></li>
        	<li></li>
	<li></li>
	<li></li>
	<li></li>
          </ul>
    </ข้าง>
    <ส่วน class="main">
        <h2></h2>
        <p></p>
         <p> </p>
  </section>
    <ส่วนท้าย>
        <h3></h3>
        <p></p>
    </footer>
</div>

เราจะกำหนดพื้นที่เหล่านี้บนคอนเทนเนอร์กริดของเราตามลำดับ เหมือนกับการวาดพื้นที่เหล่านี้ออกมา ฉันจะเว้นวรรคให้อ่านง่ายด้วย

 ตารางแม่แบบพื้นที่:
        "ส่วนหัว"
        "แถบด้านข้างหลัก"
        "ส่วนท้ายกระดาษ";

โปรดทราบว่าแถบด้านข้างแสดงรายการก่อนหลักได้อย่างไร การสลับไปมาจะทำให้คำสั่งซื้อเปลี่ยนแปลงในหน้าด้วย ขณะนี้ แถบด้านข้างอยู่ทางซ้ายและเนื้อหาหลักอยู่ทางขวา แต่คุณสามารถเปลี่ยนได้อย่างง่ายดายหากจำเป็น

สิ่งหนึ่งที่ควรทราบ: ชื่อเหล่านี้ต้อง "เชื่อมโยง" กับสไตล์ เนื่องจากมีการประกาศพื้นที่เทมเพลตกริด เราจึงไม่รู้ว่าจริง ๆ แล้วส่วนหัวนั้นอยู่ที่ใด ในบล็อกส่วนหัว grid-area: header; จำเป็นต้องเพิ่ม

 หัวข้อ{
    พื้นที่กริด: ส่วนหัว;
    ช่องว่างภายใน: 20px 0;
    จอแสดงผล: ตาราง;
    ตารางแม่แบบคอลัมน์: 1fr 1fr;
}

โครงสร้าง HTML เหมือนกับในตัวอย่าง Flexbox แต่ CSS นั้นแตกต่างกันมากในการสร้างเค้าโครงกริด

 .คอนเทนเนอร์{
    ความกว้างสูงสุด: 900px;
    สีพื้นหลัง: #fff;
    ขอบ: 0 อัตโนมัติ;
    ช่องว่างภายใน: 0 60px;
    จอแสดงผล: ตาราง;
    ตารางแม่แบบคอลัมน์: 1fr 3fr;
    ตารางแม่แบบพื้นที่:
        "ส่วนหัว"
        "แถบด้านข้างหลัก"
        "ส่วนท้ายกระดาษ";
    ช่องว่างตาราง: 50px;
}

ในการเริ่มทำงานกับ CSS Grid Layout สิ่งสำคัญคือต้องมี display: grid; ตั้งไว้บนภาชนะ. มีการประกาศกริดแม่แบบคอลัมน์ที่นี่เพื่อให้โครงสร้างโดยรวมของเพจ จำได้ไหมว่าตัวอย่าง Flexbox มีคลาส .main ตั้งค่าเป็น flex-grow เป็น 3 และแถบด้านข้างมี flex-grow เป็น 1 เพื่อสร้างขนาดได้อย่างไร ที่นี่ เทมเพลตกริด-คอลัมน์ถูกตั้งค่าเป็น 1fr และ 3fr นี่คือจุดที่กริดเป็นรูปเป็นร่างด้วยหน่วยเศษส่วน ด้วยค่าเหล่านี้ เห็นได้ชัดว่ามีสองคอลัมน์และมีความกว้างไม่เท่ากัน คอลัมน์ที่ตั้งค่าเป็น 3fr กว้างกว่าคอลัมน์อื่นสามเท่า ซึ่งอธิบายว่าแถบด้านข้างปรากฏแคบกว่าพื้นที่เนื้อหาอย่างไร

ถัดไป ต้องปรับหน่วย fr ที่ใช้สำหรับคอนเทนเนอร์สำหรับส่วนหัว ตารางเทมเพลตคอลัมน์ได้รับการปรับเป็น 1fr และ 1fr ด้วยวิธีนี้จะมีสองคอลัมน์ที่มีขนาดเท่ากันและรายการนำทางและปุ่มจะพอดี

 หัวข้อ{
    พื้นที่กริด: ส่วนหัว;
    จอแสดงผล: ตาราง;
    ตารางแม่แบบคอลัมน์: 1fr 1fr;
} 

ในการวางปุ่ม เราต้องใช้ justify-self และตั้งค่าให้สิ้นสุด

 ปุ่มส่วนหัว {
    ปรับตัวเอง: จบ;
}

การนำทางถูกวางไว้ในที่ที่จำเป็น:

 การนำทางส่วนหัว {
    ปรับตัวเอง: เริ่มต้น;
}

ส่วนท้ายแบบเต็มความกว้างไม่จำเป็นต้องตั้งค่าคอลัมน์อื่นเนื่องจากเนื้อหาอยู่ตรงกลาง

วิธีสร้างเลย์เอาต์ด้วย Flexbox และ CSS Grids

ตอนนี้เราได้เห็นแล้วว่าแต่ละวิธีสามารถทำอะไรแยกกันได้ ก็ถึงเวลาสร้างสิ่งที่ซับซ้อนขึ้นด้วยการรวม Flexbox และ CSS Grid Layouts

ดูสิ่งนี้ใน Codepen

นี่คือโครงร่างพื้นฐานสำหรับการทำให้กริดดำเนินต่อไป:

ดูสิ่งนี้ใน Codepen

สังเกตว่าการออกแบบใช้ทั้งคอลัมน์และแถวอย่างไร เลย์เอาต์นี้ต้องการสิ่งต่าง ๆ เพื่อให้สอดคล้องกันและทำงานสอดคล้องกันทั้งสองทิศทาง ดังนั้นการใช้ CSS Grid จึงมีประสิทธิภาพสำหรับเลย์เอาต์โดยรวม

การวางแผนเป็นกุญแจสำคัญในการจัดวางเช่นนี้ เป็นความคิดที่ดีที่จะร่างมันออกมาก่อนและดูว่าสิ่งต่าง ๆ เรียงซ้อนกันอย่างไร ในการเริ่มโค้ด มี display: grid; เป็นสิ่งสำคัญ หากไม่มีเลย์เอาต์ประเภทนี้จะไม่ทำงาน สิ่งหนึ่งที่ควรทราบที่นี่คือมีการเว้นวรรคระหว่างบล็อกเนื้อหา สิ่งนี้ทำได้ด้วยช่องว่างระหว่างตาราง-คอลัมน์-และช่องว่าง-แถว-ตาราง

 .คอนเทนเนอร์ {
  จอแสดงผล: ตาราง;
  ตารางแม่แบบคอลัมน์: 0.4fr 0.3fr 0.3fr;
  ตาราง-คอลัมน์-ช่องว่าง: 10px;
  ตารางแถวช่องว่าง: 15px;
}

หน่วยเศษส่วนกลับมาแล้วสำหรับเลย์เอาต์นี้ และตอนนี้ต้องการพื้นที่สามส่วน ค่าแรกของ 0.4fr กว้างกว่าค่าที่สองและสามเล็กน้อย ซึ่งเท่ากับ 0.3fr ทั้งคู่

เค้าโครงคอลัมน์และแถว

นี่คือสิ่งสำคัญในการอ้างอิงไดอะแกรมตั้งแต่เริ่มต้น เริ่มจากด้านบน นี่คือวิธีการวางส่วนหัว ครอบคลุมทุกคอลัมน์และหนึ่งแถว

 .หัวข้อ {
  ตาราง-คอลัมน์-เริ่มต้น: 1;
  กริด-ปลายคอลัมน์: 4;
  ตารางแถวเริ่มต้น: 1;
  สิ้นสุดแถวตาราง: 2;
  สีพื้นหลัง: #d5c9e2;
}

หากคุณต้องการใช้ชวเลข ค่าเริ่มต้นและสิ้นสุดจะอยู่ในบรรทัดเดียวกันและคั่นด้วยเครื่องหมายทับ มันจะมีลักษณะดังนี้:

 .หัวข้อ {
  ตาราง-คอลัมน์: 1 / 4;
  แถวตาราง: 1/2;
  สีพื้นหลัง: #55d4eb;
}

หากต้องการวางรายการอื่นๆ ทั้งหมด คุณต้องเพิ่มค่ากริดและคอลัมน์ที่เหมาะสมลงใน CSS แทนที่จะไล่ดูทีละตัว ตัวอย่างนี้อยู่ใน Codepen

หลังจากสร้าง Grid Layout แล้ว การปรับแต่งเนื้อหาอย่างละเอียดคือขั้นตอนต่อไป

การนำทาง

Flexbox เหมาะสำหรับการวางองค์ประกอบส่วนหัว ตัวอย่างเลย์เอาต์พื้นฐานกล่าวถึงสิ่งนี้ด้วยการปรับเนื้อหา: เว้นวรรคระหว่าง ตัวอย่างกริดจำเป็นต้องมี justify-self: start; ในการนำทางและปรับตัวเอง: จบ; สำหรับปุ่มสำหรับวางสิ่งของ แต่ Flexbox ทำให้การเว้นระยะห่างสำหรับการนำทางง่ายขึ้น

 .หัวข้อ {
  ตาราง-คอลัมน์: 1 / 4;
  แถวตาราง: 1/2;
  สี: #9f9c9c;
  การแปลงข้อความ: ตัวพิมพ์ใหญ่;
  ขอบด้านล่าง: 2px solid #b0e0ea;
  ช่องว่างภายใน: 20px 0;
  จอแสดงผล: ดิ้น;
  ปรับเนื้อหา: ช่องว่างระหว่าง;
  จัดรายการ: ศูนย์;
} 

รูปแบบเดียวกันนี้จะถูกติดตามที่นี่ โลโก้ รายการเมนู และปุ่มใช้การปรับเนื้อหาของ Flexbox เพื่อการเว้นวรรค

ตารางเนื้อหาคอลัมน์

สำหรับโอกาสที่ต้องการให้องค์ประกอบเรียงกันในทิศทางเดียว ซึ่งหมายถึงเป็น "มิติเดียว" มากกว่า โดยทั่วไปแล้ว Flexbox เป็นตัวเลือกที่ดีกว่า นอกจากนี้ Flexbox ยังดีในการปรับขนาดองค์ประกอบแบบไดนามิก คุณอาจลองวิธีนี้ในแถวของกล่องโดยการเพิ่ม display:flex; ในองค์ประกอบหลักและคุณสมบัติแบบยืดหยุ่นในองค์ประกอบย่อย ด้วยเทคนิคดังกล่าว จะทำให้เกิดเส้นที่สวยงามและเป็นวิธีที่มีประสิทธิภาพเพื่อให้แน่ใจว่าองค์ประกอบทั้งหมดมีความสูงเท่ากัน

เนื้อหาแถวที่มีข้อความและปุ่ม

ในส่วน "เนื้อหาเพิ่มเติม" มีการเพิ่มพื้นที่สามส่วนพร้อมข้อความและปุ่ม Flexbox ทำให้ง่ายต่อการรักษาความกว้างที่กำหนดไว้สำหรับสามคอลัมน์

 .พิเศษ {
  ตารางคอลัมน์: 2 / 4;
  แถวตาราง: 4 / 5;
  ช่องว่างภายใน: 1rem;
  จอแสดงผล: ดิ้น;
  flex-wrap: ห่อ;
  เส้นขอบ: 1px solid #ececec;
  ปรับเนื้อหา: ช่องว่างระหว่าง;
}

ข้อยกเว้น Flexbox หนึ่งข้อ

ใช่ ฉันบอกไปแล้วว่า Flexbox นั้นดีกว่าสำหรับเลย์เอาต์ กริด หรือคอลัมน์หนึ่งมิติ แต่ถ้าคุณอ่านโพสต์วิธีใช้ Flexbox เพื่อสร้างเค้าโครงการออกแบบการ์ด CSS ที่ทันสมัย ​​มีการแฮ็ก Flexbox “แถวสุดท้าย” ที่แสดงให้เห็น เพื่อรักษาแถวและคอลัมน์ให้สมดุลกัน แม้ไม่มีจำนวนการ์ดเป็นเลขคู่

 .ภาพที่เกี่ยวข้อง {
  ตาราง-คอลัมน์: 1/3;
  ตารางแถว: 5 / 6;
  จอแสดงผล: ตาราง;
  ตารางแม่แบบคอลัมน์: ทำซ้ำ (4,1fr);
  ช่องว่างตาราง: 1rem;
}
.ภาพที่เกี่ยวข้อง .icon {
    สีพื้นหลัง: สีขาว;
    ดิ้น: 1 1 150px;
}

สรุปแนวทางการออกแบบ

โดยพื้นฐานแล้ว วิธีการที่ฉันใช้ในที่นี้คือการใช้ CSS Grid Layout สำหรับเลย์เอาต์โดยรวม (และอะไรก็ตามที่ไม่ใช่เชิงเส้นในการออกแบบ) ภายในพื้นที่เนื้อหาของกริด Flexbox ถูกใช้เพื่อสั่งและปรับแต่งสไตล์ภายในพื้นที่กริดอย่างละเอียด

ทรัพยากร

มีแหล่งข้อมูลที่ยอดเยี่ยมมากมายสำหรับ Flexbox และ CSS Grid Layouts ซึ่งมากเกินไปที่จะกล่าวถึง ต่อไปนี้คือบางส่วนที่จะช่วยให้คุณเริ่มต้นไปในทิศทางที่ถูกต้องและสร้างแรงบันดาลใจให้กับเค้าโครงของคุณ

• สูตรการจัดตำแหน่งกล่อง
• ห้องทดลองเค้าโครงของเจน ซิมมอนส์
• คู่มือฉบับสมบูรณ์สำหรับกริด
• คู่มือฉบับสมบูรณ์สำหรับ Flexbox

หวังว่าแบบฝึกหัดเหล่านี้จะช่วยให้คุณมีความคิดที่ดีขึ้นเกี่ยวกับวิธีสร้างเค้าโครงด้วยทั้ง CSS Grid Layouts และ Flexbox คุณคิดอย่างไรกับเทคโนโลยีใหม่เหล่านี้ พวกเขาช่วยกระบวนการพัฒนาของคุณอย่างไร?