css-grid

How to make the items in the last row consume remaining space in CSS Grid?

由 让人想犯罪 __ 提交于 2019-11-29 10:36:06
Is there a way to force all the items in the last row, of a grid, to fill the row, no matter how many they are? I do not know the number of items that will be in the grid so I cannot target them directly. I tried to use grid-auto-flow: dense , but it is not really helping. This is my question visualized: : div { margin:20px auto; width: 400px; background: #d8d8d8; display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr); } span { height: 50px; background: blue; } <div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> I don't

Getting columns to wrap in CSS Grid

由 亡梦爱人 提交于 2019-11-29 09:34:35
How can you specify the maximum number of columns when using display: grid; , with it automatically breaking when the content becomes too wide for the space (or smaller than a minimum size)? Is there a way to do this without media queries? For example, I have the following which won't break into a single column mode when there is not enough room for the content. #grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1em; } #grid > div { background-color: #ccddaa; } <div id="grid"> <div>text text text text text text text text text text text text text text text text text text

Masonry layout with css grid

由 若如初见. 提交于 2019-11-29 09:32:06
I'm trying to create masonry layout using css grid layout . All items in grid have variable heights. And I don't know what items will be. So I can't define grid-row for each item. Is it possible to start each new item right after end of previous in column? Code I'm trying: .wrapper { display: grid; grid-template-columns: repeat(auto-fill, 330px); align-items: flex-start; grid-column-gap: 10px; grid-row-gap: 50px; } .item { background: black; border-radius: 5px; } <div class="wrapper"> <div class="item" style="height:50px"></div> <div class="item" style="height:100px"></div> <div class="item"

How can I have a sticky footer with my CSS Grid layout?

由 蓝咒 提交于 2019-11-29 09:21:48
I found this CodePen solution for a sticky footer in a CSS Grid layout, but it has two problems for me: It is kinda ugly with min-height: 100% and height: 100% It only works with two elements in the body (a div and a footer) I need something that works with this HTML structure: <body> <nav>Some navigation buttons</nav> <main>The content</main> <footer>Copyrights and stuff</footer> </body> I don't really want to pack the <nav> and the <main> into a <div> , and I would love to do this in pure CSS. // Not required! // This is just to demo functionality. $("#add").on("click", function() { $("<p

CSS grid max columns without media queries

由 浪子不回头ぞ 提交于 2019-11-29 06:42:34
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: repeat(auto-fit, minmax(200px, 1fr)); } I want a fairly generic solution to this, is what I want to

Reverse order of columns in CSS Grid Layout

由 梦想的初衷 提交于 2019-11-29 06:11:23
I was hoping to use CSS Grid to reverse the apparent order of two side-by-side divs, where one of the divs grows arbitrarily (I don't want to use floats). I've created a plunkr here: http://plnkr.co/edit/6WZBnHbwhD7Sjx2ovCO7?p=preview #container { grid-template-columns: 240px 1fr; display: grid; } .a { background: yellow; } .b { background: blue; color: white; } #container>.a { grid-column: 1; } #container>.b { grid-column: 2; } #container.reverse>.a { grid-column: 2; } #container.reverse>.b { grid-column: 1; } <div id="container" class="reverse" style="width: 800px;"> <div class="a">A</div>

Is a <button> allowed to have display:grid? [duplicate]

由 女生的网名这么多〃 提交于 2019-11-29 05:47:44
This question already has an answer here: Flexbox not working on button or fieldset elements 2 answers or, more generally, are there any elements that can't be styled with display:grid ? Consider: button, div { display: grid; grid-template-columns: 50px 50px; } /* Nevermind these, they're just for a consistent display */ button, div { border: 0; background-color: gray; color: black; width: 100px; text-align: center; font-family: sans-serif; font-size: 14px; padding: 0; } Button: <button> <span>A</span> <span>B</span> </button> <br> Div: <div> <span>A</span> <span>B</span> </div> Try it on

How to center elements on the last row in CSS Grid?

由 核能气质少年 提交于 2019-11-29 02:17:27
问题 I am using CSS grid to layout some items like this... #container { display: grid; grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%; } .item { background: teal; color: white; padding: 20px; margin: 10px; } <div id="container"> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item"

CSS Grid - unnecessary word break

由 核能气质少年 提交于 2019-11-28 14:10:46
I have a problem with CSS grid. In the following snippet extracted from the codebase, I have a very simple HTML structure with grid layout. Content is set to break-word to prevent text from overflowing. Event though there is enough space for the text to NOT get broken, it does create a line break just before the last letter. My understanding was that in grid layout, by default, items are calculated to fit the content as much as possible, which is somehow not the case in this example. Removing padding from content or margins from grid item does solve the issue, but margin is there for centering

CSS grid wrapping

由 谁都会走 提交于 2019-11-28 13:49:43
问题 Is it possible to make a CSS grid wrap without using media queries? In my case, I have a non-deterministic number of items that I want placed in a grid and I want that grid to wrap. Using Flexbox, I'm unable to reliably space things nicely. I'd like to avoid a bunch of media queries too. Here's some sample code: .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
订阅 css-grid