如何在Sketch中设置响应式的CSS网格设计

Yes, we will talk about Sketch shortly, but even if you “only” work as a web designer, you should read on here. You don’t have to write the CSS later, but you should understand the possibilities and limitations, because otherwise the design always lags behind the technology and can never be implemented correctly. Don’t worry, it’s just a little HTML and CSS and doesn’t bite.

是的，我们很快就会谈论Sketch，但即使你 "只是 "作为一个网页设计师工作，你也应该继续阅读这里。你不必在以后写CSS，但你应该了解其可能性和局限性，因为否则设计总是落后于技术，永远无法正确实施。别担心，这只是一个小小的HTML和CSS，不会咬人。

HTML markup for our example:

为我们的例子提供HTML标记。

A div with the class of .container holds 5 div/items (can of course be more or less). If you like, you can experiment with the HTML and CSS markup in CodePen directly.
>

一个类别为.container的div可以容纳5个div/items（当然可以更多或更少）。如果你喜欢，你可以直接在CodePen中试验HTML和CSS标记。
>

item example I added some CSS styling for better understanding, not relevant for the grid

Base: Set Grid, Columns and Rows in the CSS

基础。在CSS中设置网格、列和行

In the CSS, we turn the .container class into a grid by adding display:grid. With grid-template-columns we activate the desired columns, in this case 5 columns with 250px each. With grid-template-rows we can set the height of the row (if needed), in this case 150px. And that’s it, the first grid is done!

在CSS中，我们通过添加display:grid将.container类变成一个网格。通过grid-template-columns，我们可以激活所需的列，本例中是5列，每列250px。通过grid-template-rows，我们可以设置行的高度（如果需要的话），本例中是150px。就这样，第一个网格就完成了

> .container{
>   display: grid;
>   grid-template-columns: 250px 250px 250px 250px 250px;
>   grid-template-rows: 150px;
> }
> /* short form: */ 
> grid-template-columns: repeat(5, 250px);

item example2

Setting the gutter

设置天沟

Any desired distance between the items can be created with grid-gap for all items or separate for horizontal and vertical distances with column-gap and row-gap. By the way you can use all common units, for example px for fixed gutters or % for flexible gutters.

项目之间的任何所需的距离都可以用grid-gap为所有项目创建，或者用column-gap和row-gap为水平和垂直的距离分开。顺便说一下，你可以使用所有常用的单位，例如，固定水槽用px，灵活水槽用%。

> .container{
  display: grid;
  grid-template-columns: repeat(5, 25...