From da9e51c92d7c480eb1e0405094815bbe403c8897 Mon Sep 17 00:00:00 2001 From: Jodi Warren Date: Wed, 16 Aug 2017 12:56:37 -0700 Subject: [PATCH] Docs component grid laid out with CSS Grid Summary: The component grid on Components and APIs https://facebook.github.io/react-native/docs/components-and-apis.html has a set height for each item. This causes content to overflow their containers. Before: ![image](https://user-images.githubusercontent.com/1337003/29373309-b67c0dea-82a5-11e7-9850-003d66571df2.png) After: ![image](https://user-images.githubusercontent.com/1337003/29373337-d32b7214-82a5-11e7-8d12-958be9ff81aa.png) I've quickly fixed this with CSS Grid. There is much more room for improvement, but this prevents it being visually broken. Tested by locally rendering. Jest passes OK. Run docs website locally. Visually confirm correct rendering. Closes https://github.com/facebook/react-native/pull/15514 Reviewed By: ericvicenti Differential Revision: D5641555 Pulled By: TheSavior fbshipit-source-id: 3b4002e06066c3c052a75ba15a74521e6e1e7d40 --- website/src/react-native/css/react-native.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css index 4f7684bda..8962172b8 100644 --- a/website/src/react-native/css/react-native.css +++ b/website/src/react-native/css/react-native.css @@ -1764,6 +1764,13 @@ input#algolia-doc-search:focus { margin: 2px; } +@supports (display:grid) { + .component-grid { + display: grid; + grid-gap: 22px; + } +} + @media only screen and (min-device-width: 768px) { .component-grid { width: 768px; @@ -1777,6 +1784,17 @@ input#algolia-doc-search:focus { margin: 0 22px 22px auto; vertical-align: top; } + + @supports (display:grid) { + .component-grid { + grid-template-columns: repeat(3, 1fr); + } + .component { + width: auto; + height: auto; + margin: 0; + } + } } /** Showcase **/