css-grid | 易学教程

Equal height children of grid items

阅读更多关于 Equal height children of grid items

问题 With the Grid spec, I understand how to align the children of a grid container, but I want to align elements within the children, as if they were the grid items, rather than their container. Essentially, I want something that looks like this: Within each row, the cells have equal heights with their neighboring cells. Each row is independent of each other, though. The header s in the first row are 2 lines tall, but the header s in the 2nd row are 3 lines tall. The content within each element

Does CSS Grid have a flex-grow function?

阅读更多关于 Does CSS Grid have a flex-grow function?

问题 Is there an analog to flex-grow for the grid property ? I'd like my grid areas to accomodate the content they receive but have some areas take more place than others like flex-grow for flex . Practically, in the example below I'd like the turquoise to be invisible because it accomodates its content. The footer to be invisible as well because it has no content. The middle section take the remaining of the page like flex-grow . More practically, I'd like this code: .ctnr { display: grid; min

What is an alternative to css subgrid?

阅读更多关于 What is an alternative to css subgrid?

问题 I'm working on a page with a pretty simple layout - basically a data table, but using grid layout so that the columns will adjust nicely depending on content size. I want to make the rows sortable (using jQuery), so I need to find a way to wrap all the cells of a same row in a container. display: subgrid; I've tried using subgrid but it seems it's not much supported at the moment.. Obviously, just nesting a grid doesn't work as it won't sync the column sizes between different grids.. Any idea

What is the difference between auto-fill and auto-fit?

阅读更多关于 What is the difference between auto-fill and auto-fit?

I'm working with CSS grids to achieve a card grid layout. But I don't quite know how to tweak the minmax() statement to handle use cases where there aren't enough items to fill a row but still need them to look like cards! If I replace the max 1fr value with a static 100px or I use a fractional 0.25fr it upsets the scaling at smaller media sizes. .wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-column-gap: 17px; grid-row-gap: 25.5px; padding-bottom: 25.5px; } .card { background-color: #000; height: 100px; } <div class="wrapper"> <div class="card"><

Why does CSS Grid layout add extra gaps between cells?

阅读更多关于 Why does CSS Grid layout add extra gaps between cells?

Can’t figure out why CSS grid layout adds an unwanted extra space to content around the vertical cells, though margin and padding are zeroed out: .grid { display: grid; grid-template-columns: 13fr 11fr 4fr 20fr; grid-auto-rows: 12fr; grid-gap: 4px; align-items: center; } .grid figure { outline: 1px solid red; margin: 0; padding: 0; } .grid figure img { margin: 0; padding: 0; width: 100%; display: block; } .grid .gi13x12 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 13; } .grid .gi11x6.one { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end

CSS grid max columns without media queries

阅读更多关于 CSS grid max columns without media queries

问题 Is it possible to define a grid with a maximum number of columns but allow elements to wrap onto new rows when the screen width changes? I have implimented classes that allow rows to wrap onto new rows, but there is no maximum number of columns. Here is a code pen of one method using flex boxes CSS: .flex-container { display: flex; flex-wrap: wrap; } Another method is to use a grid .grid { display: grid; counter-reset: grid-items; position: relative; } .grid--auto-fit { grid-template-columns:

Preventing double borders in CSS Grid

阅读更多关于 Preventing double borders in CSS Grid

问题 Given the current CSS grid example, how can I collapse the borders in order to avoid the double borders ? This is such a simple thing to achieve using an Html table. How do I do it using display: grid ? .wrapper { display: grid; grid-template-columns: 50px 50px 50px 50px; } .wrapper > div { padding: 15px; text-align: center; border: 1px solid black; } <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> 回答1: You

The difference between justify-self, justify-items and justify-content in CSS Grid

阅读更多关于 The difference between justify-self, justify-items and justify-content in CSS Grid

I'm really confused. When looking for online resources and documentation, most of the documentation of these properties seem to reference Flex-box, not grid. And I don't know how applicable the documentation for the equivalent properties in Flex-box is to grid. So, I've tried referencing https://css-tricks.com/snippets/css/complete-guide-grid/ , which defines them as follows: justify-items - Aligns the content inside a grid item along the row axis justify-content - This property aligns the grid along the row axis justify-self - Aligns the content inside a grid item along the row axis But I

Percentage padding / margin on grid item ignored in Firefox

阅读更多关于 Percentage padding / margin on grid item ignored in Firefox

This codepen creates a grid of red cells 100*50 px on Chrome. This is the expected behavior. #grid{ display: grid; grid-gap: 8px; grid-template-columns: 100px 100px; } .cell{ background-color: red; padding-bottom: 50%; } <div id="grid"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> Firefox 52 completely ignores the padding-bottom: 50%; and I don't know why. I can't find any workaround. Can someone please help me? Michael_B From the spec: 6.4. Grid Item Margins and Paddings Authors

How to make images stay within the rows of a css grid container?

阅读更多关于 How to make images stay within the rows of a css grid container?

The code below shows the intended behavior when I resize the window in Chrome 60, and in Firefox 55 (but not in iOS Safari 10.3; that is most likely another question why it misbehaves in Safari). html, body { width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background-color: lightgrey; } .container { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, calc((60vh - 12px)/3)); /*grid-template-rows: 1fr 1fr 1fr;*/ /*grid-template-rows: auto auto auto;*/ height: 60vh; border: 3px solid yellow; padding: 3px; /*grid-gap: 20px;