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

ฉันมีเลย์เอาต์แบบเฟล็กซ์บ็อกซ์ที่เรียบง่ายพร้อมคอนเทนเนอร์เช่น: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } ตอนนี้ฉันต้องการให้รายการในแถวสุดท้ายสอดคล้องกับอีกรายการ justify-content: space-between;ควรใช้เนื่องจากความกว้างและความสูงของตารางสามารถปรับได้ ขณะนี้ดูเหมือนว่า ที่นี่ฉันต้องการให้รายการที่ด้านล่างขวาเป็น "คอลัมน์กลาง" อะไรคือวิธีที่ง่ายที่สุดในการบรรลุเป้าหมายนั้น? นี่คือjsfiddleขนาดเล็กที่แสดงพฤติกรรมนี้ .exposegrid { display: flex; flex-flow: row wrap; justify-content: space-between; } .exposetab { width: 100px; height: 66px; background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 5px; box-shadow: …

378 css  flexbox  grid-layout 

ฉันต้องใช้กริดเพื่อใช้งาน Photo Browser ใน Android ดังนั้นผมอยากจะทราบความแตกต่างระหว่าง GridView และ GridLayout เพื่อที่ฉันจะได้เลือกคนที่ใช่ ขณะนี้ฉันกำลังใช้ GridView เพื่อแสดงภาพแบบไดนามิก

212 android  grid  android-gridview  grid-layout 

ฉันแน่ใจว่ามีวิธีแก้ไขปัญหานี้อย่างง่าย โดยทั่วไปถ้าฉันมีสองคอลัมน์ฉันจะเพิ่มช่องว่างระหว่างพวกเขาได้อย่างไร เช่นถ้า html คือ: <div class="col-md-6"></div> <div class="col-md-6"></div> เอาต์พุตจะเป็นสองคอลัมน์ถัดจากกันโดยใช้ความกว้างทั้งหมดของหน้า บอกว่าตั้งไวด์ ธ1000pxแล้วแต่ละ div จะเป็น500pxไวด์ ถ้าฉันต้องการที่100pxว่างระหว่างสองสิ่งฉันจะทำสิ่งนี้ได้อย่างไร เห็นได้ชัดโดยอัตโนมัติผ่าน bootstrap ขนาด div จะกลายเป็นขนาด450pxเพื่อชดเชยพื้นที่

202 html  css  twitter-bootstrap-3  grid-layout 

Наэтотвопросестьответына Stack Overflow нарусском : Сеткаизадаптивных (ตอบสนอง) квадратов ฉันสงสัยว่าจะทำอย่างไรกับการสร้างเลย์เอาต์ด้วยสี่เหลี่ยมที่ตอบสนองได้ แต่ละช่องจะมีเนื้อหาแนวตั้งและแนวนอน ตัวอย่างที่เฉพาะเจาะจงจะแสดงด้านล่าง ...

170 html  css  responsive-design  grid-layout  aspect-ratio 

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 

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

110 css  flexbox  grid-layout  css-grid