桌面上食谱页面的标准布局
我希望我的标题和食谱详细信息在最顶部，然后是一个占据整个内容宽度的图像，然后是成分列表和食谱步骤。我不想堆叠后两个内容组，因为如果我堆叠它们，成分列表的右侧会有很多空白，所以我希望步骤坐在成分旁边，给我两列图片下方。
用于布局的 CSS 网格或 FLEXBOX？我知道我想如何在普通桌面屏幕上布置这个食谱，并且有多种方法可以对这个布局进行编码和对内容进行分组，但我如何对其进行分组，以及我想在双屏上实现什么布局在我编码之前需要考虑设备。根据我为桌面视图所做的草图，我可以使用 flexbox 和 CSS Grid 的组合来实现我想要的布局，我将成分和步骤分组到一个 flex 容器中。但是让我勾勒一下我希望我的页面如何在双屏上显示。
垂直折叠位置的可折叠设备上的理想布局通过显示屏将内容分开，因此不会被铰链遮挡。
如果我想在布局上有更大的灵活性，那么我不能将我的成分和步骤分组到一个 flex 容器中，否则，无论图像没有进入哪一列，都会有很大的空白。
如果我只在这个布局中使用 flexbox，它会产生一些我想避免乱用的间距。
添加我们的内容我将在桌面和双屏布局中只使用 CSS Grid。所以，让我们构建我们的内容。
<main>
<section class="recipe">
<div class="recipe-meta">
… <!—Contains our recipe title, yield and servings -->
</div>
<img src="imgs/pasta.jpg" alt="Pasta carbonara photographed from above on a rustic plate" />
<div class="recipe-details__ingredients">
…<!— Contains our ingredients list -->
</div>
<div class="recipe-details__preparation">
… <!— Contains our list of steps to put the ingredients together -->
</div>
</section>
</main>
接下来，让我们构建页面的结构。我要定义我的网格：我只想要三列，并且我希望它们是容器的相等部分。
.recipe {
display: grid;
grid-template-columns: repeat(3, 1fr);
接下来，我将定义我的行，并且我将使用grid-auto-rowswith minmax，这样我的行是最小的，175px但可以增长到最大内容高度的最大值。
grid-auto-rows: minmax(175px, max-content);
然后我将添加更多属性： my grip-gap、我的最大内容宽度和一个边距，以使我的布局在页面上居中。
grid-gap: 1rem;
max-width: 64rem;
margin: 0 auto;
}
然后，我将把我的内容放入我定义的网格中：
.recipe-meta {
grid-column: 1 / 4;
}
.recipe-meta p {
margin: 0;
}
img {
width: 100%;
grid-column: 1 / 4;
}
.recipe-details__ingredients {
grid-row: 3;
}
.recipe-details__preparation {
grid-column: 2 / 4;
grid-row: 3;
}
这将根据我的草图为我提供布局：
布局在桌面上按预期呈现
伟大的！但是我的双屏布局呢？让我们深入了解我们的horizontal-viewport媒体功能和双屏网格。
使用媒体查询和调整容器布局首先，这是我现在在双屏上的布局：
