css-grid

The difference between justify-self, justify-items and justify-content in CSS Grid

由 大憨熊 提交于 2019-11-26 08:08:32
问题 I\'m really confused. When looking for online resources and documentation, most of the documentation of these properties seem to reference Flex-box, not grid. And I don\'t know how applicable the documentation for the equivalent properties in Flex-box is to grid. So, I\'ve tried referencing https://css-tricks.com/snippets/css/complete-guide-grid/, which defines them as follows: justify-items - Aligns the content inside a grid item along the row axis justify-content - This property aligns the

Equal height rows in CSS Grid Layout

由 时光总嘲笑我的痴心妄想 提交于 2019-11-26 07:50:17
I gather that this is impossible to achieve using Flexbox, as each row can only be the minimal height required to fit its elements, but can this be achieved using the newer CSS Grid? To be clear, I want equal height for all elements in a grid across all rows, not just per each row. Basically, the highest "cell" should dictate the height of all cells, not just the cells in its row. Short Answer If the goal is to create a grid with equal height rows, where the tallest cell in the grid sets the height for all rows, here's a quick and simple solution: Set the container to grid-auto-rows: 1fr How

Make grid container fill columns not rows

由 生来就可爱ヽ(ⅴ＜●) 提交于 2019-11-26 05:42:53
问题 I want my grid to fill in vertically like this: 1 4 7 2 5 8 3 6 9 ... arbitrary number of additional rows. Instead, it fills in horizontally like this: 1 2 3 4 5 6 7 8 9 I want to specify the number of columns in my grid, not the number of rows. This is what my div looks like with inline CSS styling: <div style=\"display:grid; grid-template-columns:1fr 1fr 1fr;\"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> It\'s

The difference between percentage and fr units in CSS Grid Layout

由 孤街浪徒 提交于 2019-11-26 04:55:31
I am playing around with CSS Grid Layout and came across a question I cannot find an answer for. Consider the following example: :root { --grid-columns: 12; --column-gap: 10px; --row-gap: 10px; } .grid { display: grid; grid-template-columns: repeat(var(--grid-columns), calc(100% / var(--grid-columns))); grid-column-gap: var(--column-gap); grid-row-gap: var(--row-gap); justify-content: center; } [class*=l-] { border: 1px solid red; } .l-1 { grid-column-start: span 1; } .l-2 { grid-column-start: span 2; } .l-3 { grid-column-start: span 3; } .l-4 { grid-column-start: span 4; } .l-5 { grid-column

A grid layout with responsive squares

由 人盡茶涼 提交于 2019-11-26 04:27:32
问题 I am wanting to create a grid layout with responsive squares. I feel like I should be able to do this with CSS Grid layout but having trouble setting the height of each square to be equal to the width. Also having trouble setting a gutter between each square. Would I be better off using flexbox? Currently my HTML looks like this but will be dynamic so more squares may be added. And of course it needs to be responsive so will ideally use a media query to collapse it to one column. <div class=\

CSS Grid Layout not working in IE11 even with prefixes

由 梦想与她 提交于 2019-11-26 03:16:21
问题 I\'m using following HTML markup for my grid. <section class=\"grid\"> <article class=\"grid-item width-2x height-2x\">....</article> <article class=\"grid-item\">....</article> <article class=\"grid-item\">....</article> <article class=\"grid-item width-2x\">....</article> <article class=\"grid-item height-2x\">....</article> <article class=\"grid-item\">....</article> <article class=\"grid-item\">....</article> <article class=\"grid-item width-2x height-2x\">....</article> </section> The

Grid areas not laying out properly in CSS Grid

由 生来就可爱ヽ(ⅴ＜●) 提交于 2019-11-26 02:38:55
问题 I want to make my website using CSS grid system but it seems not to be working. Here is my code: .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: \"logo faq\" \"about-us\"; } .logo { background-color: blue; grid-area: logo; } .faq { background-color: red; grid-area: faq; } .aboutUs { background-color: cyan; grid-area: about-us; } <div class=\"grid\"> <div class=\"logo\"> LOGO </div> <div class=\"faq\"> FAq </div> <div class=\"aboutUs\">

Make a grid item span to the last row / column

由 回眸只為那壹抹淺笑 提交于 2019-11-26 02:24:01
问题 Is it possible to make a grid item span from the first to the last row when I don\'t know the number of rows? Lets say I have the following html with an unknown number of boxes. How can I make the third .box span from the first grid-line to the last? .container { display: grid; grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%; grid-template-rows: auto [last-line]; } .box { background-color: blue; padding: 20px; border: 1px solid red; } .box:nth-child(3) { background-color:

How come minmax(0, 1fr) works for long elements while 1fr doesn&#39;t?

由 流过昼夜 提交于 2019-11-26 02:14:21
问题 So I have this grid: +---------+------------------------------+---------+ | <div> | <p> - 1000 characters long | <div> | +---------+------------------------------+---------+ Inside p there\'s super long string with no spaces. div s are placeholders with fixed dimensions. This produces the above: display: grid; grid-auto-flow: column; grid-template-columns: auto minmax(0, 1fr) auto; But changing minmax(0, 1fr) to 1fr gives this: +---------+----------------------------------------+ | <div> | <p

The difference between percentage and fr units in CSS Grid Layout

由 痞子三分冷 提交于 2019-11-26 01:47:35
问题 I am playing around with CSS Grid Layout and came across a question I cannot find an answer for. Consider the following example: :root { --grid-columns: 12; --column-gap: 10px; --row-gap: 10px; } .grid { display: grid; grid-template-columns: repeat(var(--grid-columns), calc(100% / var(--grid-columns))); grid-column-gap: var(--column-gap); grid-row-gap: var(--row-gap); justify-content: center; } [class*=l-] { border: 1px solid red; } .l-1 { grid-column-start: span 1; } .l-2 { grid-column-start
订阅 css-grid