css-grid

问题 Is possible to achieve this structure using html + css ? But instead of having that vertical space between orange blocks I want to be one in the top of another. I have used flex and grid but not really succeed so far :( jsfiddle: .container { padding: 10px; border: 1px solid red; display: flex; flex-flow: row wrap; justify-content: space-between; } .big { width: calc(60% - 22px); padding: 10px; background: lime; height: 100px; margin-bottom: 10px; } .small { width: calc(40% - 22px); height:

问题 I know the squared solution with :before { padding-bottom } . This works only with a width value, because padding is always using a relation to the parents width. - But exactly this is my problem. I ONLY have the value of the a fixed HEIGHT (by parent container) and I need squared boxes by that height value. I don't like to use JS. If there is a solution to REPLACE the STATIC WIDTH value with pure CSS, please tell me! Here's a simple code sample: div.wrapper { height: 70px; padding: 5px;

问题 I'm trying to create a flexbox that contains a header and a 2x2 CSS grid. The flexbox ( .container ) fills the entire viewport. The height of the header is variable. It may change dynamically while the page is open. The four cells in the grid must occupy the remaining part of the viewport and they must have the equal width and height. Here's what I have now: html, body { height: 100%; padding: 0; margin: 0; } * { box-sizing: border-box; } .container { height: 100%; display: flex; flex

问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 10 months ago . So I have already got my mobile version of my website laid out (see sketch below) but now I am having trouble trying to achieve my envision goal for my desktop version. I did a quick sketch on paint to give you guys an idea of what I have so far. The problem is though I want to

问题 How I can make the <legend> span all rows, so it will mess up the <fieldset> which is styled as a 3 column CSS grid? <fieldset> <legend>Personal Details</legend> <label class="field__label" for="first-names"> First names </label> <input class="form__entry" id="first-names" type="text" name="firstName"> <span class="form__feedback form__instructions"> Must only use letters, spaces, hyphens and apostrophes </span> </fieldset> CSS: form { display: grid; grid-template-columns: minmax(100px, max

问题 So I'm trying to display cards within a grid. I would like the card size to be based on the grid size and then to overlay text on top of it that correctly matches the width. Here's my implementation so far but it seems like the div/img no longer respects the grid's sizes for (let i = 0; i < 15; i++) { $("#grid").append(` <div class="item"> <div> <img src="http://via.placeholder.com/250x350" /> <div class="text"> sadfsd </div> </div> </div> `); } .flex { border: 1px solid black; display: flex;

问题 I am a first time CSS-Grid user: What I try to achieve is to have a flexible box system using a 3-column grid to which I can simply add boxes of the size of 1, 2 or 3 columns; just using one class. I tried to achieve this by doing this https://codepen.io/mathil/pen/WXarXB : .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 12px; width: 50%; margin-right: auto; margin-left: auto; background: grey; } .card-fullspan { grid-column: span 3; } .card-twothirdspan { grid

问题 I have a html template like the following: <div class="my-grid-container"> <div class="summary-card" ng-repeat="cardData in summaryCardsCtrl.summaryDetails" > <div ng-include="'.....'"></div> </div> </div> The included html looks like: <div class="card"> <div class="card-title" id="{{cardData.label}}">{{cardData.label}}</div> <div class="card-data"> <div class="card-ico"> ..... </div> <div class="card-value"> <span title="{{cardData.rawValue}}">{{cardData.value}}</span> <span>%</span> </div>

问题 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: https

问题 If I have this below, all the data will overlap because I told it to go to the same column and row. How can I make it start at the column and row I want and it "grow"? If I remove the row, it goes down the page as expected. But what if I wanted it to start at Row 1/3, 5/12, etc.? Can you do that? .mygrid { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); grid-gap: 20px; border: 5px solid red; } .content { grid-column: col-start 4 / span 7; grid-row: 1 / 3; } <div class=