Gettin的Griddy With：构建您自己CSS Grid并删除框架

by Theran Brigowatz

通过Theran Brigowatz

Gettin的Griddy With：构建您自己CSS Grid并删除框架 (Gettin’ Griddy With It: build your own CSS Grid and drop the frameworks)

Just about every front end developer’s journey starts with the basic HTML, CSS, JavaScript path. You start with the structure, make it look decent, and then make it do something. However, somewhere along the journey it is easy to get caught up in the world of CSS frameworks and gloss over some of the finer details.

几乎每个前端开发人员的旅程都始于基本HTML，CSS，JavaScript路径。 您从结构开始，使其看起来像样，然后使它起作用。 但是，在旅途中的某个地方很容易陷入CSS框架的世界，并掩盖了一些更好的细节。

Bootstrap comes along with its nice pretty grid, using just a few classes and a CDN to make that nice pretty mobile-responsive grid. And before you know it, you start reaching for that framework whenever you build a project that needs a grid layout. I often did the same, that is until I started “Gettin’ Griddy With It.”

Bootstrap附带了漂亮的漂亮网格，仅使用了几个类和CDN即可使漂亮的漂亮的移动响应网格。 而且，在您了解它之前，只要您构建需要网格布局的项目，便会开始接触该框架。 我经常这样做，直到我开始“ Gettin'Griddy With It”。

What sent me down the road of learning CSS Grid was when I was trying to build up a site using Semantic UI React (the prettier and less vague Bootstrap.) However, when building up a grid, I couldn’t make two columns sit flush with each other, and ended up messing with every margin and padding rule under the sun, to override the styles the framework had built in. It was frustrating experience, and I spent more time messing with specificity rules than actually coding.

导致我学习CSS Grid的原因是当我尝试使用Semantic UI React(更漂亮，不太模糊的Bootstrap)构建站点时。但是，当构建网格时，我无法使两列齐平彼此之间，最终弄乱了框架下的所有边距和填充规则，以覆盖框架的内置样式。这令人沮丧，经验丰富，并且我花了更多时间弄乱专用性规则，而不是实际编码。

That’s where CSS Grid comes in. CSS Grid is a relatively new addition to CSS3 and boy is it a doozy. Having to go to an imported g