W3C home > Mailing lists > Public > public-css-archive@w3.org > April 2017

[csswg-drafts] [css-grid] Position cells individually

From: Pavel Klimashkin via GitHub <sysbot+gh@w3.org>
Date: Fri, 07 Apr 2017 19:22:30 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-220305341-1491592948-sysbot+gh@w3.org>
klimashkin has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Position cells individually ==
Using CSS Grid is very convenient to do responsive table with vertically stacked columns like https://hashnode.com/post/really-responsive-tables-using-css3-flexbox-cijzbxd8n00pwvm53sl4l42cx#advanced-example

You can see example using Grid here: http://codepen.io/klimashkin/pen/peXPXY
But when content of some cells on not last row is wrapped into several lines, other cells in the same row become the same height. And we have vertical gaps between cells on different rows (LabelX columns):

![tablegrid](https://cloud.githubusercontent.com/assets/576077/24816050/3685ec30-1b8c-11e7-8ee9-d837f0713c7b.gif)

It's understandable because of 
![screen shot 2017-04-07 at 12 18 53 pm](https://cloud.githubusercontent.com/assets/576077/24816107/69e1d9cc-1b8c-11e7-9c11-e6ca2cbc0ec1.png)

I couldn't find workaround for that using grid properties (align-self, min-content, etc), and I don't know if it's even possible with CSS GRID to move cells upper. Is it?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1183 using your GitHub account
Received on Friday, 7 April 2017 19:22:37 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:11 UTC