与包装一起使用CSS Grid的理想方法？

Question

不幸的是，我很难找到使用带包装的CSS Grid的示例。这就是我想出的。

我网站的包装器部分的最大宽度为1340像素。我们的网站使用5列，因此每列为268px。请注意，有些元素会从包装中渗出，以覆盖整个宽度。

// WRAPPER CONFIG
$wrapper-width: 1340px; // Based on design PSD
$column-width: 268px; //1340 / 5 = 268. Our design uses 5 columns.

.grid {
    display: grid;
    grid-template-columns:
    minmax(1rem, 1fr) //space left of wrapper
    minmax(min-content, $column-width) //column with 268px width
    minmax( min-content, calc(4 \* #{$column-width}) ) // column with 1072px width
    minmax(1rem, 1fr); //space right of wrapper

    grid-template-areas: //example layout
    "A A A A"
    ". B B ."
    "C C C C"
    ". D D .";
}

有任何评论和批评吗？如果您知道更好的示例/资源，我很想知道。