css-grid

问题 I'm experimenting with css grid and i'm trying to make a simple example, but it does not seem to work on IE11 although i use the appropriate syntax: .grid { background: gold; height: 90vh; display: -ms-grid; display: grid; grid-gap: 20px; -ms-grid-columns: 405px 1fr; grid-template-columns: 405px 1fr; grid-template-rows: 1fr; -ms-grid-rows: 1fr; } section { background: red; } <div class="grid"> <section> section1 </section> <section> section2 </section> </div> 回答1: Apparently you need to

问题 I'm experimenting with css grid and i'm trying to make a simple example, but it does not seem to work on IE11 although i use the appropriate syntax: .grid { background: gold; height: 90vh; display: -ms-grid; display: grid; grid-gap: 20px; -ms-grid-columns: 405px 1fr; grid-template-columns: 405px 1fr; grid-template-rows: 1fr; -ms-grid-rows: 1fr; } section { background: red; } <div class="grid"> <section> section1 </section> <section> section2 </section> </div> 回答1: Apparently you need to

问题 This question already has answers here : Grid properties not working on elements inside grid container (1 answer) Positioning content of grid items in primary container (subgrid feature) (1 answer) Closed 2 years ago . I have this markup <main> <section class="download"> <img src="media/icon.svg" alt="TOX chat icon" width="345" height="280"> <div class="download_desc"> <h1>A New Kind of Instant Messaging</h1> <p> Whether it's corporations or governments, digital surveillance today is

问题 I have a CSS grid layout - for this question I will use a simple example -> 1 row, 4 columns (2 areas). In grid areas, I have a text with different font sizes. I would like to align the text to each other but can't figure it out. I didn't find similar questions but maybe I searched for wrong phrases. EDIT: Both must be aligned to the bottom line. Font-size is calculated. Code and example have been modified. .timer { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr auto auto

问题 I have a CSS grid layout - for this question I will use a simple example -> 1 row, 4 columns (2 areas). In grid areas, I have a text with different font sizes. I would like to align the text to each other but can't figure it out. I didn't find similar questions but maybe I searched for wrong phrases. EDIT: Both must be aligned to the bottom line. Font-size is calculated. Code and example have been modified. .timer { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr auto auto

问题 MDN align-content, justify-content and justify-items describe baseline as one of their possible values. While baseline makes sense when is used with align-items or align-self , I don't get how it could work along with justify-content , justify-items , justify-self and align-content properties. Do you have any suggestions? 回答1: The MDN is not accurate here as there is no baseline for justify-content If you check the actual Flexbox specification you will see that there is no baseline value for

问题 I want to create a monopoly board like . There are following features in the board The corner are square shaped and bigger than other boxes The text of each row is facing a specfic angle. My basic html structure is below Board Row 1 Tile 1 Tile 2 ... I am successful in creating the basic structure using grid-template-areas . The problem I am facing is that I can't rotate the tiles of each row according to the need. I have created a basic snippet which have only 3 tiles per row. The first row

问题 Consider the following 3-column grid layout with max-width constraint on container: .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 56px minmax(56px, auto) 56px; max-width: 300px; margin: auto; } header { background-color: grey; grid-column: 1 / span 3; grid-row: 1 / 2; } main { background-color: #2E64FE; grid-column: 1 / span 2; grid-row: 2 / 3; } aside { background-color: #FF0040; grid-column: 3 / span 1; grid-row: 2 / 3; } footer { background-color: grey

问题 Consider the following 3-column grid layout with max-width constraint on container: .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 56px minmax(56px, auto) 56px; max-width: 300px; margin: auto; } header { background-color: grey; grid-column: 1 / span 3; grid-row: 1 / 2; } main { background-color: #2E64FE; grid-column: 1 / span 2; grid-row: 2 / 3; } aside { background-color: #FF0040; grid-column: 3 / span 1; grid-row: 2 / 3; } footer { background-color: grey

问题 I have a CSS grid and in this grid articles that could be blog posts. They consist of an image on the left and text on the right. I need the articles to start at the bottom, so that newer articles appear above them. But I just can't get them to start at the bottom whatever I try it's not working. align-items: end; should do the trick but it doesn't … So what am I missing here? .blog-Grid { display: grid; } .post { display: grid; grid-template-columns: repeat(2, 1fr); width: 50%; margin: 0 0