react 布局css引用_在React Apps中简化CSS网格布局

react 布局css引用

Most of the time frontend devs just despise two things. First one is making email templates, second one being layouting or as we generally call it “CSS”. Lets face it, its quite laborious and might get painful when you have to build layouts or your HTML in a CSS-in-JS paradigm prevalent these days.

大多数时候，前端开发人员只是轻视两件事。 第一个是制作电子邮件模板，第二个是布局或我们通常称为“ CSS”的模板。 面对现实吧，这很费力，当您不得不使用当今流行CSS-in-JS范式构建布局或HTML时，它可能会很痛苦。

动机 (Motivation)

I’ve personally enjoyed working with the vintage Bootstrap Grid system. Even though, it was effort intensive to create a row and put columns inside it but it was a foolproof and easy way to build responsive layouts at its time. The problem with layouting has always been that, we have viewed our web pages as 1D plane i.e it’s an array of rows with columns inside them.

我个人非常喜欢使用老式的Bootstrap Grid系统 。 即使创建行并在其中放入列也需要大量的精力，但这是在当时构建响应式布局的一种万无一失的简便方法。 布局的问题一直是，我们将网页视为一维平面，即它是其中包含列的行的数组。

And, then came the revolutionary official CSS Grid spec, 6–7 years back. When I read it, I was completely sold to it. But, the sad reality is that its quite underrated among developers, mostly because of the adoption by other libraries and initial learning curve I believe. That said, it’s built by the makers of CSS to solve the exact problem we’ve been facing forever of One Dimensional layouting. It allows us to do Two dimensional layouting with a great flexibility with the concepts like template areas and auto-fill and auto-fit.

然后，是6至7年前革命性的正式CSS Grid规范问世。 当我阅读它时，我被完全卖了。 但是，可悲的现实是，它在开发人员中被低估了，主要是因为其他图书馆的采用和我相信的初步学习曲线。 就是说，它是由CSS的制造商构建的，用于解决我们一直面临的一维布局的确切问题。 它使我们能够灵活地进行二维布局，包括模板区域，自动填充和自动拟合等概念。

议程 (Agenda)

This article is not going to be a tutorial on CSS grid. If you’re looking for a best interactive tutorial, this one is a praise worthy free course by Scrimba.

本文不会成为CSS网格的教程。 如果您正在寻找最佳的交互式教程，那么这是Scrimba值得称赞的免费课程 。

We’ll see how to build responsive 2D layouts quickly using one of the library I published on NPM as @mollycule/lattice (name inspired from Chemistry Lattice 🤓). It’s built on top of existing awesome tools like Styled Components and Styled System.

我们将看到如何使用我在NPM上发布的一个库@ mollycule / lattice (名称取自Chemistry Lattice inspired)来快速构建自适应2D布局。 它建立在现有的出色工具(如Styled Components和Styled System)的基础上 。

给我看代码 (Show me the code)

Here’s how the usage and result might look like

用法和结果如下所示

The library exports Grid, Cell and a general usage Box for general use divs. Using these, there won’t be a need of writing a styled component ever. All the particular styles can be inlined by virtue of styled-system properties.

该库导出网格，单元格和通用框以供通用div使用。 使用这些，就不再需要编写样式化的组件。 可以通过样式系统属性内联所有特定样式。

The usage is quite inspired from my old memory of Bootstrap grid, like the pull push is being imitated by the offset and span props here. And specifying responsive screen sized based properties too in that manner as well. All at the ease of writing in JSX. It saves a lot of time and effort and works well at scale.

该用法的灵感来自于我对Bootstrap网格的旧记忆，例如此处的offset和span道具模仿了推推。 并且也以这种方式指定基于响应屏幕尺寸的属性。 轻松编写JSX。 这样可以节省大量时间和精力，并且可以很好地发挥作用。

The styled components being extendable makes the generic Box component to be wrapped around for more specific frequently used elements when needed.

样式化的组件是可扩展的，因此可以在需要时将通用Box组件包装起来，以容纳更特定的常用元素。

Here’s the Codesandbox demo. Open it and try to play around with the screen sizes and the prop values.

这是Codesandbox演示。 打开它并尝试使用屏幕尺寸和属性值。

Detailed API usage is given in the NPM package and github readme.

NPM 软件包和github自述文件中提供了详细的API使用情况。

结论 (Conclusion)

Necessity is the mother of invention

必要性是发明之母

I was surprised to discover why such a solution doesn’t exist which combines the best of both worlds of responsive styling and employing the goodness of CSS Grids for layouting in the current frontend app development ecosystem.

我很惊讶地发现为什么不存在这样的解决方案，该解决方案结合了响应式样式的优点和在当前前端应用程序开发生态系统中采用CSS Grids的优点进行布局。

Give it a try, you’ll love it.

试试看，您会喜欢的。

翻译自: https://medium.com/@paramsingh_66174/css-grid-layouting-made-easy-in-react-apps-a8a6b1a23531

react 布局css引用