css-grid

问题 I'm interested does CSS Grid has feature to create repeatable grid-template-areas ? To explain the feature i created this example, .grid { display: grid; grid-template-columns: repeat(3, 1fr) 6rem; grid-template-areas: '. . . button' '. . . button' '. . . button' '. . . button'; grid-gap: 1rem; } .item { background: #add8e6; padding: 1rem; } .button { grid-area: button; background: #ffc0cb; padding: 1rem; } <div class="grid"> <div class="item">Item</div> <div class="item">Item</div> <div

问题 Consider the following 4 columns grid: .container { width: 400px; height: 200px; position: relative; } .grid-columns { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 30px; z-index: -1; } .grid-column { background-color: #ddd; } .columns { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 30px; } .column { background-color: rgba(0, 0, 255, 0.5);

问题 I'm having a really hard time creating the following layout using the CSS grid feature, and I'm not sure if it's even possible: I could potentially put the top and right bars outside the grid in a table, but since the columns in the repeating part of the grid are a fixed width, I haven't found a way not to leave a space between them and the sidebar without letting them stretch. I tried a lot of different things and none of them worked. I would think a solution would look something like that:

问题 According to MDN docs (https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows): min-content Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track. So, in this example: .grid { display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: max-content max-content max-content min-content; grid-template-areas: "one aside" "two aside" "three aside" "four aside" } .one { background: red; grid-area: one; } .two { background:

问题 In CSS grid, grid-column: 1/1 and 1/2 are showing the same result. Is there any difference between them? Look at the code below. .grid-container { display: grid; grid-template-columns: auto auto auto auto; grid-gap: 10px; background-color: #2196F3; } .item1 { grid-column: 1 / 2; } <div class="grid-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> <div class="item7">7<

问题 I have a CSS Grid inside a Flexbox column, and the grid has flex-grow: 1 . In Chrome, the grid expands to fill available space, but its content does not, even with align-content: stretch on the grid. In Firefox and Edge, the content expands to fill the grid's height, as desired. Here's a pen that reproduces the problem, and images of how it looks in different browsers. Is this a bug with Chrome, and if so, can anyone suggest a straightforward workaround? Chrome Firefox Edge #wrapper { display

问题 Building off of a previous question, I'm trying to add bigger blocks to my grid layout. In the last question, I needed to have a div span multiple rows. The problem now is that I need a div to span multiple rows and columns . If I have a five-element row , how could I put bigger elements in the middle of it? (as float puts it naturally on the side). Here's an example snippet: #wrapper{ width: 516px; } .block{ display: inline-block; width: 90px; height: 50px; margin: 5px; background-color: red

问题 I am trying to dynamically resize css grid layout boxes by dragging the column dividers (or resize placeholders) with the mouse. I set resize: horizontal; on the nav element to resize, and it gets resized when I drag the small resize handle in the lower right corner of the element, but the width of the neighbouring column is not automatically adjusted which leads to overlap. Here is a broken codepen. HTML : <main> <nav>#1</nav> <header>#2</header> <section>#3</section> </main> CSS : main {

问题 What I wanna do is to make a CSS grid with a dynamic number of cells. For the sake of simplicity, let's assume there will always be four cells per row. Can I specify a grid with such a dynamic number of rows? To make it easier, here's the Flexbox implementation: const COLORS = [ '#FE9', '#9AF', '#F9A', "#AFA", "#FA7" ]; function addItem(container, template) { let color = COLORS[_.random(COLORS.length - 1)]; let num = _.random(10000); container.append(Mustache.render(template, { color, num }))

问题 What I wanna do is to make a CSS grid with a dynamic number of cells. For the sake of simplicity, let's assume there will always be four cells per row. Can I specify a grid with such a dynamic number of rows? To make it easier, here's the Flexbox implementation: const COLORS = [ '#FE9', '#9AF', '#F9A', "#AFA", "#FA7" ]; function addItem(container, template) { let color = COLORS[_.random(COLORS.length - 1)]; let num = _.random(10000); container.append(Mustache.render(template, { color, num }))