ในบทช่วยสอนวันนี้ เราจะสร้างแถบการนำทางด้านบนด้วย HTML และ CSS เราจะพิจารณาสองวิธีในการสร้างแถบนำทางนี้ วิธีหนึ่งกับ flexbox และอีกวิธีหนึ่งกับกริด CSS
จะเป็นวิธีที่ดีในการเปรียบเทียบความแตกต่างระหว่างสองวิธี และคุณจะเห็นว่าชอบวิธีไหนมากกว่ากัน
การนำทางที่เสร็จแล้วจะมีลักษณะดังนี้:
บนเดสก์ท็อป ลิงก์ทั้งหมดจะอยู่ในแถวเดียวกัน โดยมีหน้าแรกทางด้านซ้าย และลิงก์อื่นๆ ทางด้านขวา
จากนั้นบนมือถือเราจะมีหน้าแรกที่แถวบนสุดและลิงก์อื่น ๆ ที่แถวล่าง และลิงก์จะอยู่ที่กึ่งกลางหน้า
เริ่มต้นด้วยการตั้งค่าไฟล์ของเรา
ตั้งค่าไฟล์
ในการสร้างการนำทางของเรา เราจะสร้าง index.html ไฟล์และ style.scss ไฟล์ที่เราจะคอมไพล์เป็น style.css โดยใช้ส่วนขยาย VS Code Live Sass
ใน . ของเรา ส่วนที่เราจะเพิ่ม องค์ประกอบเพื่อโหลด style.css ไฟล์.
มาเริ่มสร้างแถบนำทางกันเถอะ!
สร้างมาร์กอัป HTML
ใน index.html . ของเรา ขั้นแรกให้สร้างมาร์กอัป HTML สำหรับการนำทาง ฉันพยายามใช้แท็ก HTML เชิงความหมายให้มากที่สุด เพื่อหลีกเลี่ยงการใช้เพียง div สำหรับทุกสิ่ง
เรากำลังจะสร้าง ซึ่งจะมีลิงก์การนำทางของเราทั้งหมด จากนั้นเราจะใส่ลิงค์ในรายการที่ไม่เรียงลำดับ
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
นี่จะเป็นมาร์กอัปการนำทางพื้นฐานที่จะเริ่มต้นด้วย เราจะต้องทำการปรับแต่งบางอย่างในขณะที่เราสร้างเวอร์ชัน flexbox และ grid แต่คุณสามารถเริ่มต้นด้วยการสร้าง นี้สองชุด ธาตุ
ถ้าเราโหลด index.html ในเบราว์เซอร์ มันจะดูธรรมดามาก
แต่ไม่ต้องห่วง! มาเริ่มเพิ่มสไตล์ของเราใน style.scss ไฟล์.
เริ่มเพิ่มรูปแบบสากลและข้อความค้นหาสื่อ
ก่อนอื่น ฉันจะเพิ่มสไตล์สากลที่ฉันพยายามใช้อยู่เสมอ:
html {
font-size: 100%;
box-sizing: border-box;
}
body {
margin: 0px;
padding: 0px;
min-height: 100vh;
}
*, *::before, *::after {
box-sizing: inherit;
}
นอกจากนี้ มาทำให้สีดูน่าสนใจขึ้นอีกหน่อย ใน แท็ก เราจะตั้งค่า background-color:#1b1b1b และตรวจสอบให้แน่ใจว่าองค์ประกอบทั้งหมดและ ลิงก์เป็นสีขาวพร้อม สี:#ffffff มันเลยเป็นธีมสีเข้ม
จากนั้นสำหรับ , :เพิ่ม list-style-type:none เพื่อซ่อนสัญลักษณ์แสดงหัวข้อย่อย และตั้งค่าระยะขอบและช่องว่างภายในเป็น 0px .
มาเพิ่มช่องว่างภายใน . กัน องค์ประกอบที่มี padding:10px และเพิ่มช่องว่างภายในสำหรับรูปแบบแท็บเล็ตและเดสก์ท็อปโดยใช้แบบสอบถามสื่อ:
nav {
padding: 10px;
@media (min-width: 600px){
padding: 20px;
}
}ทุกอย่างดูดีขึ้น! แทนที่จะใช้ฟอนต์ serif เริ่มต้น ฉันต้องการใช้ฟอนต์ของ Google, Open Sans
เราสามารถนำเข้าตระกูลแบบอักษรลงใน style.scss . ของเราได้ โดยเพิ่มบรรทัดนี้ที่ด้านบนสุด:
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
ตอนนี้อยู่ในสไตล์ของเราสำหรับ องค์ประกอบ เราสามารถตั้งค่า font-family:'Open Sans', Arial, Helvetica, sans-serif เพื่อโหลด Open Sans หรือฟอนต์สำรอง
เพิ่มสไตล์ลิงก์ด้วยเส้นขอบด้านล่างแบบไล่ระดับเชิงเส้น
มาทำให้รูปแบบลิงก์น่าสนใจยิ่งขึ้นกันเถอะ
เราจะลบการขีดเส้นใต้เริ่มต้นโดยการตั้งค่า text-decoration:none ไปที่ องค์ประกอบ และฉันต้องการแทนที่ด้วยขีดเส้นใต้สีชมพูหนาขึ้นโดยใช้ border-bottom . ฉันจะสร้างเส้นใต้แบบไล่ระดับบนโฮเวอร์เป็นสีชมพูถึงม่วง
สำหรับสี ฉันชอบสร้างตัวแปร Sass ที่ด้านบนของ style.scss ไฟล์ภายใต้ @import คำสั่ง เพิ่มตัวแปรต่อไปนี้:
$linkPink: rgb(216, 29, 216);
$linkPurple: rgb(98, 16, 250);การใช้ตัวแปรจะทำให้ง่ายขึ้นเมื่อเราเพิ่มสีให้กับสไตล์อื่นๆ
ตอนนี้ เพื่อสร้างขีดเส้นใต้ที่หนาขึ้น เราสามารถใช้องค์ประกอบเทียมของ แท็กให้มีขอบล่าง
นี่คือรหัสสำหรับสิ่งนั้น:
a {
position: relative;
text-decoration: none;
}
a::before {
content: "";
position: absolute;
height: 3px;
right: 0px;
bottom: -3px;
left: 0px;
background-color: $linkPink;
}
สิ่งที่เกิดขึ้นที่นี่คือเรากำลังสร้าง ::before pseudo-element สูง 3px และมีพื้นหลังสีชมพู เพื่อให้มันอยู่ในตำแหน่งที่ด้านล่าง เราจำเป็นต้องตั้งค่าเป็น ตำแหน่ง:สัมบูรณ์ และตรวจสอบให้แน่ใจว่า องค์ประกอบมี ตำแหน่ง:ญาติ จึงไม่ลอยขึ้นหน้าเพจ (ฉันอธิบายเพิ่มเติมเกี่ยวกับปรากฏการณ์นี้ที่นี่)
จากนั้น เพื่อวางตำแหน่งองค์ประกอบเทียมใต้ข้อความ เรากำลังตั้งค่า ด้านล่าง:-3px ดังนั้นจึงมีช่องว่างเล็กน้อยระหว่างข้อความลิงก์และตัวบรรทัดเอง และเพื่อให้บรรทัดขยายความกว้างเต็มของลิงก์ เราใช้ left:0px และ ขวา:0px .
ตอนนี้ลิงก์ดูดีขึ้นเล็กน้อย!
รูปแบบการไล่ระดับสีเชิงเส้น
ไปอีกระดับของจินตนาการและเพิ่มเอฟเฟกต์โฮเวอร์ที่ยอดเยี่ยม เราต้องการให้ขีดเส้นใต้เปลี่ยนเป็นการไล่ระดับสีจากสีชมพูเป็นสีม่วง และข้อความลิงก์จะเปลี่ยนจากสีขาวเป็นสีชมพูเมื่อคุณวางเมาส์เหนือลิงก์
ในการดำเนินการนี้ เราจะใช้ a:hover ตัวเลือกที่มีสไตล์ดังต่อไปนี้:
a:hover {
color: $linkPink;
&::before {
background: linear-gradient(to right, $linkPink 40%, $linkPurple 75%);
}
}
สำหรับ ::before pseudo-element พื้นหลังจะเปลี่ยนเป็น linear-gradient . ในฟังก์ชันการไล่ระดับสี เรากำลังบอกให้เปลี่ยนจากสีชมพูเป็นสีม่วงเมื่อคุณเลื่อนจากซ้ายไปขวา
และเรากำลังควบคุมตำแหน่งที่การไล่ระดับสีเปลี่ยนแปลงด้วยเปอร์เซ็นต์ เราต้องการให้สีชมพูสีแรกเปลี่ยนจากความกว้าง 0% (ซ้ายสุด) เป็น 40% และเราต้องการให้สีม่วงที่สองเปลี่ยนจากความกว้าง 100% (ขวาสุด) เป็น 75% จากนั้นจะมีการไล่ระดับสีระหว่าง 40% ถึง 75% ของความกว้างขององค์ประกอบ
เรายังเปลี่ยนสีข้อความลิงก์เป็นสีชมพูเมื่อวางเมาส์เหนือ
ตอนนี้เมื่อคุณวางเมาส์เหนือลิงก์ จะมีลักษณะดังนี้:
ดูแฟนซีมากขึ้นใช่มั้ย
เอาล่ะ ตอนนี้เราได้เสร็จสิ้นสไตล์ส่วนกลางที่เราจะใช้สำหรับแถบการนำทางแบบยืดหยุ่นและแบบเส้นตารางแล้ว
มาเริ่มเขียนสไตล์สำหรับการนำทาง flexbox กันเถอะ
การนำทางแบบ Flexbox
แบ่งลิงก์ออกเป็นกลุ่มย่อยแบบยืดหยุ่น
ฉันมักจะเริ่มต้นด้วยการเขียนสไตล์เดสก์ท็อปก่อน แล้วจึงค่อยเขียนบนมือถือ เนื่องจากเดสก์ท็อปมักจะซับซ้อนกว่าด้วยหลายคอลัมน์ ในขณะที่อุปกรณ์เคลื่อนที่มักจะซ้อนกันในคอลัมน์เดียว แต่คุณสามารถเขียนสไตล์ของคุณในลำดับใดก็ได้ที่เหมาะกับคุณ
ในการนำทางเดสก์ท็อป เราต้องการให้ลิงก์หน้าแรกอยู่ทางซ้าย และอีกสามลิงก์รองรวมกันอยู่ทางด้านขวา
ในการทำให้สิ่งนี้เกิดขึ้นกับ flexbox เราจะต้องแบ่งลิงก์ออกเป็นสองกลุ่ม กลุ่มหนึ่งสำหรับลิงก์ทางซ้าย และอีกกลุ่มสำหรับลิงก์ทางขวา จากนั้นทั้งสองกลุ่มจะเป็นองค์ประกอบลูกแบบยืดหยุ่นของพาเรนต์แบบยืดหยุ่น
กลับไปที่มาร์กอัป HTML เราต้องการ องค์ประกอบที่จะเป็นผู้ปกครองแบบยืดหยุ่น งั้นย้ายโฮมลิงค์ออกจาก ธาตุ
จากนั้นลิงก์ที่เหลือจะอยู่ภายใน
มาเพิ่มคลาส “flexbox” ให้กับ เพื่อแยกสไตล์ flexbox ของเราออกจากสไตล์กริดในภายหลัง
มาร์กอัปที่อัปเดตจะมีลักษณะดังนี้:
<nav class="flexbox">
<a href="#">Home</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>เพิ่มสไตล์ flexbox สำหรับเดสก์ท็อป
ในการนำทางของเรา เราต้องการเปิด flexbox โดยการตั้งค่า nav.flexbox องค์ประกอบที่จะ แสดง:flex . จากนั้นเราจะเพิ่มกฎ justify-content:space-between เพื่อวางกลุ่มแรกไว้ทางซ้ายและอีกกลุ่มอยู่ทางขวา
สร้าง display:flex และใช้ justify-content:flex-end เพื่อจัดแนวลิงก์ทางด้านขวา และเราจะเพิ่ม align-items:center; เพื่อจัดองค์ประกอบลูกดิ้นให้อยู่ตรงกลางในแนวตั้ง
ดูดีขึ้น!
ตอนนี้ เราต้องการให้ลิงก์รองสามลิงก์อยู่ติดกันในการจัดเรียง flexbox เราจะสร้าง align-items:center . นอกจากนี้เรายังต้องการเพิ่มช่องว่างระหว่างลิงก์ ดังนั้นเราจะเพิ่ม margin-right:20px แต่ทำให้เป็น 0px สำหรับ :last-child ตัวเลือก เพื่อให้แน่ใจว่าลิงก์สุดท้ายจะไม่มีพื้นที่เพิ่มเติม
สไตล์เดสก์ท็อปของเราจะมีลักษณะดังนี้:
nav.flexbox {
display: flex;
justify-content: space-between;
align-items: center;
ul {
display: flex;
align-items: center;
}
ul li {
margin-right: 20px;
&:last-child {
margin-right: 0px;
}
}
}และแถบนำทางจะมีลักษณะดังนี้:
เพิ่มสไตล์ flexbox สำหรับมือถือ
ตอนนี้ มาเพิ่มสไตล์มือถือกัน ก่อนอื่น มาจัดเนื้อหาที่ยืดหยุ่นบนอุปกรณ์เคลื่อนที่กัน
ตอนนี้ในมือถือ ลิงก์หน้าแรกถูกจัดชิดซ้ายเนื่องจาก justify-content:space-between กฎสำหรับองค์ประกอบหลักแบบยืดหยุ่น
เราสามารถจัดกึ่งกลางโดยย้ายกฎของสไตล์นั้นไปยังคิวรีสื่อสำหรับความกว้างที่ใหญ่ขึ้น จากนั้นตั้งค่า justify-content ไปที่ center สำหรับมือถือ
ต่อไป เราต้องการให้ลิงก์รองสามลิงก์รวมเข้ากับแถวใหม่ ให้เพิ่ม flex-wrap:wrap ไปที่ nav.flexbox ตัวเลือกเพื่อเปิดใช้งานการตัดคำ
สไตล์ควรมีลักษณะดังนี้:
nav.flexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
@media (min-width: 600px){
justify-content: space-between;
}
}
และเพื่อบังคับให้ห่อ เราจะสร้าง
ฉันชอบใช้คลาสตัวช่วย เราจึงเพิ่มคลาส "fullwidth" ให้กับ .fullwidth ตัวเลือกใน nav.flexbox . ของเรา กฎ.
อันดับแรก เราจะตั้งค่า flex:1 0 100% . flexนี้ เฟล็กซ์ คุณสมบัติเป็นการจดชวเลขสำหรับคุณสมบัติ flex สามประการ:flex-grow , flex-shrink , flex-base .
เราอนุญาตให้เติบโตได้หากจำเป็นด้วย flex-grow จาก 1 และเราไม่อนุญาตให้ย่อด้วย flex-shrink จาก 0 จากนั้นเราจะตั้งค่าความกว้างเริ่มต้นเป็น 100% โดยใช้ flex-basis .
นอกจากนี้ เราจะจัดลิงก์ให้อยู่กึ่งกลางใน flex parent บนมือถือ ดังนั้นเราจะเพิ่ม justify-content:center .
อย่างไรก็ตาม เราไม่ต้องการให้ลิงก์สำรองเป็นแบบฟูลไวด์และอยู่กึ่งกลางสำหรับแท็บเล็ตหรือเดสก์ท็อป สำหรับความกว้างของอุปกรณ์ที่ใหญ่ขึ้น เราต้องการ flex คุณสมบัติที่จะเป็น 0 1 อัตโนมัติ มันจะไม่เติบโต มันสามารถย่อขนาดได้ถ้าจำเป็น และความกว้างเริ่มต้นจะเป็นอะไรก็ตามที่เป็นความกว้างตามธรรมชาติของเนื้อหา
มาเพิ่มคิวรี่สื่อสำหรับรูปแบบเดสก์ท็อปกันเถอะ:
.fullwidth {
flex: 1 0 100%;
justify-content: center;
@media (min-width: 600px){
flex: 0 1 auto;
}
}
ฉันสามารถเขียน max-width . ได้ แบบสอบถามสื่อเพื่อกำหนดเป้าหมายกฎรูปแบบแรกเหล่านั้นสำหรับมือถือเท่านั้น แต่ฉันพยายามใช้กฎสไตล์มือถือเป็นค่าเริ่มต้น จากนั้นจึงเพิ่ม min-width . ที่ใหญ่ขึ้นเรื่อยๆ ถามสื่อเพื่อหลีกเลี่ยงความขัดแย้ง
ขึ้นอยู่กับคุณจริงๆ ว่าข้อความค้นหาสื่อประเภทใดที่คุณใช้ แต่ฉันแนะนำให้เลือกประเภทหนึ่ง (ต่ำสุดหรือสูงสุด) เพื่อใช้เวลาส่วนใหญ่
นอกจากนี้ สำหรับลิงก์รองสามลิงก์ ฉันต้องการตั้งค่าความกว้างเพื่อให้ข้อความ "บล็อก" อยู่กึ่งกลางใต้ลิงก์ "หน้าแรก" ตอนนี้มันอยู่กึ่งกลางตามความกว้างรวมของลิงก์แถวที่สอง แต่เนื่องจาก "รายชื่อติดต่อ" ยาวกว่า "เกี่ยวกับ" เล็กน้อย จุดกึ่งกลางของแถวจึงอยู่ทางด้านขวาตรงกลางของข้อความ "บล็อก" เล็กน้อย
ในการแก้ไขปัญหานี้ เราจะสร้างคอลัมน์ย่อยแบบยืดหยุ่นแต่ละคอลัมน์ในแถวที่สองให้มีความกว้างคงที่เท่ากันทั้งหมด 100px ดังนั้นเราจะตั้งค่า flex คุณสมบัติเป็น 0 0 100px และจัดกึ่งกลางข้อความ เราต้องการกฎเหล่านั้นสำหรับมือถือเท่านั้น ดังนั้นเราจะยกเลิกกฎสำหรับเดสก์ท็อปโดยการตั้งค่า flex เป็น 0 0 อัตโนมัติ .
เรามาลดช่องว่างระหว่างรายการสำหรับมือถือให้เหลือ 10px และคงอยู่ที่ 20px สำหรับความกว้างของเดสก์ท็อป
โค้ดทั้งหมดจะมีลักษณะดังนี้:
ul li {
flex: 0 0 100px;
margin-right: 10px;
text-align: center;
@media (min-width: 600px){
flex: 0 0 auto;
margin-right: 20px;
}
&:last-child {
margin-right: 0px;
}
}
การปรับแต่งครั้งสุดท้ายที่เราจะทำคือการเพิ่มช่องว่างระหว่างลิงก์หน้าแรกแรกและลิงก์รองสามลิงก์ที่มี margin-bottom สำหรับมือถือ เราจะเขียนกฎของสไตล์ที่กำหนดเป้าหมายไปที่ องค์ประกอบที่เป็นลูกโดยตรงของ nav.flexbox parent ดังนั้นเฉพาะลิงก์หน้าแรกเท่านั้นที่จะได้รับผลกระทบ:
nav.flexbox {
> a {
margin-bottom: 10px;
@media (min-width: 600px){
margin-bottom: 0px;
}
}
}การนำทางบนมือถือจะมีลักษณะดังนี้เมื่อเปิดใช้ตัวตรวจสอบ Firefox flexbox คุณจึงเห็นเส้นสำหรับแต่ละคอลัมน์:
และนั่นคือสำหรับการนำทาง flexbox! ตอนนี้เรามาสร้างสิ่งนี้โดยใช้กริด CSS เท่านั้น
วิธีกริด CSS
ความแตกต่างหลักประการหนึ่งระหว่าง flexbox และ grid คือเมื่อใช้ flexbox การจัดเรียงคอลัมน์และแถวจะถูกกำหนดโดยคุณสมบัติ flex ที่ตั้งค่าบนองค์ประกอบย่อย flex ใน flex คุณสมบัติ และกำหนดว่า flex parent ถูกตั้งค่าเป็น wrap หรือไม่ คุณจึงพูดได้ว่า flexbox ใช้แนวทาง "เน้นเนื้อหาเป็นหลัก"
ด้วย CSS grid เป็นแนวทาง "grid-first" คุณออกแบบเทมเพลตกริดของคุณ (หมายถึงคอลัมน์และแถว) โดยใช้คุณสมบัติกริดในองค์ประกอบหลัก และคุณสามารถควบคุมแต่ละตำแหน่งในเทมเพลตกริดที่จะวางองค์ประกอบย่อยของกริดได้
เนื่องจากระดับการควบคุมส่วนบุคคลนี้ ในแถบการนำทางแบบกริด CSS ของเรา เราจึงสามารถใส่ลิงก์ทั้งหมดรวมถึงลิงก์หน้าแรกแรกในพาเรนต์เดียวกัน
<nav class="grid">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>เพิ่มสไตล์กริดสำหรับมือถือ
มาเปลี่ยนมันด้วยการนำทางกริดของเราและเริ่มต้นด้วยการเขียนสไตล์มือถือก่อน!
บนมือถือ เราต้องการให้ลิงก์หน้าแรกอยู่ที่แถวแรก โดยกินพื้นที่ 100% ของความกว้าง จากนั้น เราต้องการให้ลิงก์รองสามลิงก์อยู่ในแถวที่ 2 และอยู่กึ่งกลาง
ใน display:grid .
ตอนนี้ มาออกแบบเทมเพลตกริดของเรากัน เนื่องจากแถวที่สองจะมีสามลิงก์ เรามาสร้างเทมเพลตสามคอลัมน์กัน
ฉันต้องการทำให้คอลัมน์มีความกว้างเท่ากันทั้งหมด แต่ฉันไม่ต้องการให้กว้างเกินไป มาตั้งค่า grid-template-columns:repeat(3, 100px) บน
เรากำลังใช้ repeat() ฟังก์ชันเพื่อสร้างสามคอลัมน์ที่มีความกว้าง 100px
คุณสมบัติที่มีประโยชน์อีกอย่างของกริด CSS คือความสามารถในการสร้างรางน้ำ (ช่องว่าง) ระหว่างรายการกริด ดังนั้นแทนที่จะต้องเพิ่มระยะขอบให้กับกริดเด็กเหมือนใน flexbox เราสามารถตั้งค่า grip-gap:10px .
นอกจากนี้เรายังสามารถจัดกึ่งกลางตารางทั้งหมดบนหน้าด้วย justify-content:center และจัดกึ่งกลางข้อความในแต่ละคอลัมน์ด้วย justify-items:center .
เมื่อเราเปิดใช้ตัวตรวจสอบกริดของ Firefox (มันยอดเยี่ยมมาก ถ้าคุณยังไม่ได้ลอง) ตารางจะมีลักษณะดังนี้:
เราสามารถเห็นตารางสามคอลัมน์ที่อยู่ตรงกลางได้อย่างชัดเจน แต่ลิงก์หน้าแรกจะต้องอยู่ในแถวของตัวเอง เราต้องการความกว้างสามคอลัมน์
ในการทำเช่นนี้ เราจะใช้คลาสตัวช่วยอีกครั้ง เพิ่มคลาส "fullwidth" ให้กับหน้าแรก ธาตุ
ในสไตล์ของเรา เราจะให้ .fullwidth เลือกกฎลักษณะของ grid-column:1 / 4 . ซึ่งจะทำให้คอลัมน์ย่อยของกริดเริ่มต้นที่เส้นกริดแนวตั้งเส้นแรก และขยายไปถึงเส้นกริดที่สี่ในตอนท้าย
หน้าตาก็จะประมาณนี้ และเราได้เปิดเบอร์ไลน์ไว้เพื่อให้คุณได้ดูวิธีการนับ:
เพิ่มสไตล์กริดสำหรับเดสก์ท็อป
สำหรับเดสก์ท็อป เราต้องการให้ลิงก์ทั้งหมดอยู่ในแถวเดียว และอีกครั้ง เราต้องการให้ลิงก์หน้าแรกอยู่ทางซ้าย จากนั้นให้ลิงก์อื่นๆ อีกสามลิงก์อยู่ทางด้านขวา
ฉันยังต้องการให้แต่ละคอลัมน์ในสามคอลัมน์สุดท้ายมีขนาดเท่ากับเนื้อหาที่อยู่ในนั้น เพื่อให้แน่ใจว่ามีช่องว่างระหว่างลิงก์เท่ากัน
ทั้งหมดนี้หมายความว่าเราจะต้องเปลี่ยนเทมเพลตกริดสำหรับความกว้างของอุปกรณ์ที่ใหญ่ขึ้น โดยใช้คิวรีสื่อ
แล้วเราควรเปลี่ยน template เป็นอะไรดี? เราต้องการลิงก์ทั้งหมดในแถวเดียวกัน ดังนั้นเราต้องการตารางสี่คอลัมน์
หากต้องการก้าวไปในทิศทางที่ถูกต้องเพียงขั้นตอนเดียว เรามาเริ่มกันโดยการตั้งค่าการเปลี่ยน grid-template-columns คุณสมบัติจาก repeat(3, 100px) เพื่อ ทำซ้ำ (4, 100px) บนพาเรนต์กริดสำหรับความกว้างมากกว่า 600px
สิ่งนี้จะสร้างสี่คอลัมน์ และเราสามารถปรับแต่งมันต่อไปได้
นอกจากนี้ เรามาอัปเดต .fullwidth . กัน สไตล์จึงใช้เพียงคอลัมน์เดียวบนเดสก์ท็อป โดยการตั้งค่า grid-column:1 / 2 . ซึ่งจะทำให้คอลัมน์หน้าแรกขยายจากเส้นกริดที่ 1 ไปยังเส้นกริดที่ 2 เท่านั้น
นี่คือสิ่งที่เรามี:
ลิงก์อยู่ในสี่คอลัมน์ แต่เนื่องจากความกว้างทั้งหมด 100px จึงอยู่กึ่งกลางหน้า
ในการทำให้ลิงก์หน้าแรกแรกไปทางซ้าย เราจำเป็นต้องทำให้กริดใช้ความกว้างของหน้าทั้งหมด 100% และในการทำเช่นนั้น เราสามารถทำให้คอลัมน์แรกนั้นในเทมเพลตกริดใช้พื้นที่ว่างที่มีอยู่ได้
ดังนั้นการเปลี่ยน grid-template-columns ถึง 1fr ซ้ำ (3, 100px) จะปล่อยให้ลิงก์รองสามลิงก์กว้าง 100px และคอลัมน์แรกจะใช้พื้นที่ที่เหลือ
มาดูกันว่าจะหน้าตาเป็นอย่างไร:
การเดินทาง! อย่างไรก็ตาม เพื่อให้สามคอลัมน์สุดท้ายกว้างเท่ากับเนื้อหา เราใช้ fit-content() การทำงาน. หากเราตั้งค่าสามคอลัมน์สุดท้ายเป็น fit-content(50px) จากนั้นคอลัมน์จะแยกขนาดให้พอดีกับเนื้อหา
ดังนั้น grid-template-columns . ของเรา คุณสมบัติสำหรับเดสก์ท็อปตอนนี้จะเป็น 1fr repeat(3, fit-content(50px)) .
ความกว้างของคอลัมน์ดูดี!
ตอนนี้ เรามาจัดแนวข้อความลิงก์ในคอลัมน์กัน ตอนนี้พวกมันอยู่ตรงกลางเนื่องจาก justify-items:center กฎที่เราใช้สำหรับมือถือ
มาเปลี่ยนให้เดสก์ท็อปเป็น justify-items:end เพื่อจัดแนวลิงก์ทางด้านขวา จากนั้นเราสามารถจัดวางเฉพาะลิงก์หน้าแรกทางด้านซ้ายโดยการตั้งค่า justify-self:start สำหรับ .fullwidth ตัวเลือก
ตอนนี้ เราสามารถเห็นการนำทางเดสก์ท็อปที่เสร็จสิ้นสำหรับตาราง และตรงกับการนำทาง flexbox:
Flexbox หรือ Grid?
ในการสร้างการนำทางนี้ รูปแบบ flexbox ใช้โค้ด 46 บรรทัดใน style.scss ของเรา ในการเขียน และมาร์กอัป HTML นั้นซับซ้อนกว่าเล็กน้อย
สไตล์กริดใช้โค้ดเพียง 24 บรรทัดในการเขียน! ที่ต่างกันมากคือเราต้องเพิ่ม margin-bottom และ ขอบขวา กฎของสไตล์เพื่อเพิ่มช่องว่างระหว่างรายการใน flexbox และในกริดที่ดูแลทั้งหมดด้วย grid-gap ทรัพย์สิน
โดยส่วนตัวแล้วฉันชอบโค้ดที่มีน้ำหนักเบาซึ่งจำเป็นสำหรับกริด CSS แต่ flexbox ยังคงเป็นตัวเลือกที่ดี หากคุณคุ้นเคยกับ flexbox มากขึ้น!
คุณสามารถดูซอร์สโค้ดได้ที่นี่ใน Codepen
