css-grid

问题 TL;DR: Is there anything like table-layout: fixed for CSS grids? I tried to create a year-view calendar with a big 4x3 grid for the months and therein nested 7x6 grids for the days. The calendar should fill the page, so the year grid container gets a width and height of 100% each. .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); } Here\'s a working example:

问题 I need to implement a fairly run-off-the-mill masonry layout. However, for a number of reasons I don\'t want to use JavaScript to do it. Parameters: All elements have the same width Elements have a height that cannot be calculated server side (an image plus various amounts of text) I can live with a fixed number of columns if I have to there is a trivial solution to this that works in modern browsers, the column-count property. The problem with that solution is that elements are ordered in

问题 I have a flex container (the blue square) with the following properties: display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; Therefore, its children (the light blue squares) arrange themselves as you see below. However, I\'d like to add another child (the green square) out of the normal flow and position it relative to its parent. To position it as you see below, I\'d ideally write something like bottom: 20px; and margin: auto; . I tried to play around with z-index

问题 I have a page full of blocks which pile up with display: inline-block . I want to make some four or two times bigger, so I used float: left or right to put other blocks around. My problem is if I have a five-element row , how could I put a bigger element in the middle of it? (as float put 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; } .bigger{ height: 110px; } <div