css-grid

Change the number of columns and rows in a grid as the number of items increase

由 旧巷老猫 提交于 2020-05-24 03:32:07
问题 I have to design a responsive grid. The grid should change based on the number of items (instead of the size of the screen). From 5 to 6 items should be 2x3, from 7 to 9 items should be 3x3, from 10 to 12 items should be 3x4, from 13 to 16 items should be 4x4, and so on... Is this something I can do using CSS Grid? This is what I've tried: <main> <figure> <img src="https://placekitten.com/600/400" alt=""> </figure> <figure> <img src="https://placekitten.com/600/400" alt=""> </figure> <figure>

Resize property on grid items results in overlap of other grid items

由 懵懂的女人 提交于 2020-05-13 07:34:14
问题 I have a CSS grid that is set to auto-fill the columns, to display as many items on a row as will fit. This is done with: grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); I would like to be able to resize selected grid items, which I am trying with: resize: both; overflow: auto; This works at a basic level, but the content will overlap/stretch over adjacent grid items when resized horizontally: When resized vertically, the rows below are instead pushed down, so there is no overlap

Set CSS Grid on <body> element?

由 邮差的信 提交于 2020-04-30 09:26:10
问题 Can a grid be declared on the <body> element? My concern is that using a wrapper <div> can leave some unwanted padding / margins if you want the content to be flush with edges of the browser. 回答1: Just add the universal selector (*) to your CSS, this will apply any rule to every element on the page. If any elements need them you can then add margins or padding to those elements themselves. This helps get rid of spacing when you can't quite tell what is causing it. * { margin:0; padding:0; }

Grid layout on <fieldset>… Bug on chrome?

由 此生再无相见时 提交于 2020-04-29 08:57:17
问题 From my decades-long experience of hand-coding HTMLs, I have learnt that <form> , <fieldset> are just block -level elements like <div> . CSS-wise, they behave just the same in terms of positioning and sizing. (Please bear with me, I am ignoring old browsers like IE6 here. ) .... or so I thought.... *Before I go on, I have to state that I use Firefox for development and testing most of the time. I was on a project with a lot of <form> and <fieldset> all over the place. To simplify my question

CSS Grid to have minimum number of columns possible with auto flow after wrapping

由 旧巷老猫 提交于 2020-04-17 16:56:57
问题 Is it possible to have a CSS grid with auto flow that minimises the number of columns after wrapping? How? I have a grid with 6 items with auto-placement. Once not all 6 of them fit in one row, I'd like to have 3 columns and 2 rows, instead of 5 columns and 1 row, with only one element on the second one. I'd like to avoid media queries, if possible. A visual representation of what I'd like to do: 1) If all 6 items fit in one row, show them in one row. | OOO OOO OOO OOO OOO OOO | | O1O O2O O3O

CSS Grid to have minimum number of columns possible with auto flow after wrapping

由 梦想与她 提交于 2020-04-17 16:55:40
问题 Is it possible to have a CSS grid with auto flow that minimises the number of columns after wrapping? How? I have a grid with 6 items with auto-placement. Once not all 6 of them fit in one row, I'd like to have 3 columns and 2 rows, instead of 5 columns and 1 row, with only one element on the second one. I'd like to avoid media queries, if possible. A visual representation of what I'd like to do: 1) If all 6 items fit in one row, show them in one row. | OOO OOO OOO OOO OOO OOO | | O1O O2O O3O

CSS Grid to have minimum number of columns possible with auto flow after wrapping

由 倾然丶 夕夏残阳落幕 提交于 2020-04-17 16:51:32
问题 Is it possible to have a CSS grid with auto flow that minimises the number of columns after wrapping? How? I have a grid with 6 items with auto-placement. Once not all 6 of them fit in one row, I'd like to have 3 columns and 2 rows, instead of 5 columns and 1 row, with only one element on the second one. I'd like to avoid media queries, if possible. A visual representation of what I'd like to do: 1) If all 6 items fit in one row, show them in one row. | OOO OOO OOO OOO OOO OOO | | O1O O2O O3O

CSS Grid Layout Dynamic Rows [duplicate]

由 假装没事ソ 提交于 2020-04-17 05:20:56
问题 This question already has answers here : Can I make a CSS grid with dynamic number of rows or columns? (5 answers) Closed 14 days ago . I was wondering if there is a way to assign a dynamic number of rows and columns to a Grid layout without Javascript? Every example I've seen has also included some Javascript and as of now I'm working on a bare knowledge of only HTML and CSS (a student). What I am trying to achieve is that as I add content, I don't want to have to create new rows in my CSS.

CSS Grid Layout Dynamic Rows [duplicate]

由 我是研究僧i 提交于 2020-04-17 05:18:52
问题 This question already has answers here : Can I make a CSS grid with dynamic number of rows or columns? (5 answers) Closed 14 days ago . I was wondering if there is a way to assign a dynamic number of rows and columns to a Grid layout without Javascript? Every example I've seen has also included some Javascript and as of now I'm working on a bare knowledge of only HTML and CSS (a student). What I am trying to achieve is that as I add content, I don't want to have to create new rows in my CSS.

CSS Grid Layout Dynamic Rows [duplicate]

由 孤人 提交于 2020-04-17 05:18:50
问题 This question already has answers here : Can I make a CSS grid with dynamic number of rows or columns? (5 answers) Closed 14 days ago . I was wondering if there is a way to assign a dynamic number of rows and columns to a Grid layout without Javascript? Every example I've seen has also included some Javascript and as of now I'm working on a bare knowledge of only HTML and CSS (a student). What I am trying to achieve is that as I add content, I don't want to have to create new rows in my CSS.
订阅 css-grid