คำถามติดแท็ก css-grid

ฉันกำลังพยายามสร้างหน้าง่าย ๆ ด้วย CSS Grid สิ่งที่ฉันไม่สามารถทำได้คือวางข้อความไว้ที่กึ่งกลางจาก HTML ไปยังเซลล์กริดที่เกี่ยวข้อง ฉันได้ลองวางเนื้อหาในแยกdivของทั้งด้านในและด้านนอกของleft_bgและright_bgตัวเลือกและเล่นกับคุณสมบัติ CSS บางอย่างเพื่อประโยชน์ ฉันจะทำสิ่งนี้ได้อย่างไร html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; grid-gap: 0px 0px; } .left_bg { display: subgrid; background-color: #3498db; grid-column: 1 / 1; grid-row: 1 / 1; z-index: 0; } …

179 html  css  centering  css-grid 

TL; DR:มีอะไรที่เหมือนกับtable-layout: fixedCSS กริดหรือไม่ ฉันพยายามสร้างปฏิทินมุมมองรายปีด้วยตารางขนาดใหญ่ 4x3 ตารางในเดือนนั้นและซ้อนกัน 7x6 กริดสำหรับวันนั้น ปฏิทินควรเติมหน้าดังนั้นคอนเทนเนอร์กริดของปีจะได้รับความกว้างและความสูง 100% ต่อรายการ .year-grid { width: 100%; height: 100%; display: grid; grid-template: repeat(3, 1fr) / repeat(4, 1fr); } .month-grid { display: grid; grid-template: repeat(6, 1fr) / repeat(7, 1fr); } นี่คือตัวอย่างการทำงาน: https://codepen.io/loilo/full/ryXLpO/ เพื่อความเรียบง่ายปากกาทุกเดือนมี 31 วันและเริ่มในวันจันทร์ ฉันยังเลือกขนาดตัวอักษรที่เล็กเพื่อแสดงให้เห็นถึงปัญหา: รายการกริด (= เซลล์วัน) จะค่อนข้างข้นเนื่องจากมีหลายร้อยรายการในหน้า และทันทีที่ป้ายหมายเลขวันมีขนาดใหญ่เกินไป (อย่าลังเลที่จะเล่นด้วยขนาดตัวอักษรในปากกาโดยใช้ปุ่มที่ด้านซ้ายบน) …

153 css  grid-layout  css-grid 

ฉันจำเป็นต้องใช้รูปแบบการก่ออิฐค่อนข้างทำงาน อย่างไรก็ตามด้วยเหตุผลหลายประการฉันไม่ต้องการใช้ JavaScript เพื่อทำมัน พารามิเตอร์: องค์ประกอบทั้งหมดมีความกว้างเท่ากัน องค์ประกอบมีความสูงที่ไม่สามารถคำนวณฝั่งเซิร์ฟเวอร์ (รูปภาพพร้อมข้อความจำนวนมาก) ฉันสามารถอยู่กับคอลัมน์จำนวนคงที่ถ้าฉันต้อง มีวิธีการแก้ปัญหาที่น่ารำคาญนี้ที่ทำงานในเบราว์เซอร์ที่ทันสมัยคุณสมบัติcolumn-count ปัญหาของการแก้ปัญหานั้นก็คือการเรียงลำดับองค์ประกอบในคอลัมน์: ในขณะที่ฉันต้องการองค์ประกอบที่จะสั่งซื้อในแถวอย่างน้อยประมาณ: แนวทางที่ฉันได้ลองแล้วไม่ได้ผล: ทำรายการdisplay: inline-block: เปลืองพื้นที่แนวตั้ง ทำรายการfloat: left: ฮ่า ๆ ๆ ตอนนี้ฉันสามารถเปลี่ยนการเรนเดอร์ฝั่งเซิร์ฟเวอร์และเรียงลำดับรายการใหม่โดยหารจำนวนรายการด้วยจำนวนคอลัมน์ แต่มันซับซ้อนข้อผิดพลาดง่าย (ขึ้นอยู่กับวิธีที่เบราว์เซอร์ตัดสินใจแบ่งรายการเป็นคอลัมน์) ดังนั้นฉันต้องการ เพื่อหลีกเลี่ยงถ้าเป็นไปได้ มีเวทเฟล็กบ็อกซ์แบบใหม่ที่ทำให้สิ่งนี้เป็นไปได้หรือไม่?

134 html  css  flexbox  css-grid 

เป็นไปได้ไหมที่จะสร้าง CSS grid wrap โดยไม่ต้องใช้มีเดีย ในกรณีของฉันฉันมีจำนวนรายการที่ไม่สามารถกำหนดได้ซึ่งฉันต้องการวางไว้ในตารางและฉันต้องการให้เส้นตารางนั้นรวมเข้าด้วยกัน ด้วยการใช้ Flexbox ฉันไม่สามารถจัดพื้นที่ได้อย่างน่าเชื่อถือ ฉันต้องการหลีกเลี่ยงการค้นหาสื่อมากมายเช่นกัน นี่คือโค้ดตัวอย่างบางส่วน : .grid { display: grid; grid-gap: 10px; grid-auto-flow: column; grid-template-columns: 186px 186px 186px 186px; } .grid > * { background-color: green; height: 200px; } <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด และนี่คือภาพ GIF: โปรดทราบว่าหากใครสามารถบอกฉันได้ว่าฉันสามารถหลีกเลี่ยงการระบุความกว้างของรายการทั้งหมดเช่นที่ฉันอยู่ด้วยgrid-template-columnsได้อย่างไรจะดีมาก ฉันต้องการให้เด็กระบุความกว้างของตัวเอง

126 html  css  css-grid 

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

110 css  flexbox  grid-layout  css-grid 

ฉันพยายามที่จะศูนย์องค์ประกอบภายในของ<button>-tag กับ justify-content: centerflexbox แต่ Safari ไม่ได้อยู่ตรงกลาง ฉันสามารถใช้สไตล์เดียวกันกับแท็กอื่น ๆ และทำงานได้ตามที่ต้องการ (ดู<p>แท็ก -tag) มีเพียงปุ่มเท่านั้นที่จัดชิดซ้าย ลองใช้ Firefox หรือ Chrome แล้วคุณจะเห็นความแตกต่าง มีลักษณะตัวแทนผู้ใช้ที่ฉันต้องเขียนทับหรือไม่? หรือวิธีแก้ปัญหาอื่น ๆ สำหรับปัญหานี้? div { display: flex; flex-direction: column; width: 100%; } button, p { display: flex; flex-direction: row; justify-content: center; } <div> <button> <span>Test</span> <span>Test</span> </button> <p> <span>Test</span> <span>Test</span> </p> …

91 html  css  safari  flexbox  css-grid