css 3 grid-如何对齐图像?

我正在尝试使用 CSS 3 Grid 使用我导入的图像对我的主页进行一些特定的放置。这就是我想要实现的目标:

在此输入图像描述

这就是我目前网格上的内容:

在此输入图像描述

这是我的代码:

<div class="wrapper">


    <div class="bed"><img src="http://placehold.it/300x300" alt=""></div>

    <div class="pillow"><img src="http://placehold.it/300x300" alt=""></div>

    <div class="kitchen"><img src="http://placehold.it/300x300" alt=""></div>

    <div class="living-room"><img src="http://placehold.it/300x300" alt=""></div>

    <div class="sofa"><img src="http://placehold.it/300x300" alt=""></div>



</div>


@endsection


@push('style')

<style>


.wrapper{


    display: grid;

    grid-template-columns: 1fr 0.5fr 1fr ;

    grid-auto-rows: minmax(100px,auto);

    padding: 1em;

}



.wrapper >div{


padding: 1em;


}


.bed{


 height: 50%;



}


.pillow{


 height: 50%;

 width:100%;


}

.kitchen{

    height: 50%;

}


.living-room{

    height: 70%;

    width:150%;

}


.sofa{

    height: 50%;

    width:150%;


}


img{

    width:100%;

    height: 100%;

    border-radius: 20px;

}

如何排列图像,使其与预期结果完全一致?


撒科打诨
浏览 67回答 1
1回答

慕尼黑8549860

更新我删除了800px/600px明确的高度,网格默认填充整个屏幕。为简单起见,我拉伸了所有图像以填充整个网格单元。需要注意的是grid-row和grid-column值是如何运作的。通过指定每个网格单元应跨越多远,高度和宽度自然分布在整个网格中。对于这个例子,我将网格设置为800px宽和600px高。我使用fr网格规则的单位,因此它们将根据与其他孩子的关系相对分布。下面一行告诉浏览器将网格设置为 8 个单位长。第一列将是总宽度的 3/8(800px在本例中)。第二列看起来比其他列窄,所以我做到了2fr。grid-template-columns:&nbsp;3fr&nbsp;2fr&nbsp;3fr;-1当您在网格子测量中看到 a 时,本质上意味着转到末尾。例如,以下代码片段表示从第 3 行开始并跨越到末尾,无论有多少行。grid-row:&nbsp;3&nbsp;/&nbsp;-1;演示.wrapper {&nbsp; display: grid;&nbsp; grid-template-columns: 3fr 2fr 3fr;&nbsp; grid-template-rows: repeat(8, 1fr);&nbsp; padding: 1em;&nbsp; grid-gap: 0.5em;&nbsp; background-color: #eee;}.wrapper>div {&nbsp; position: relative;}.wrapper>div::after {&nbsp; position: absolute;&nbsp; transform: translate(-50%, -50%);&nbsp; top: 50%;&nbsp; left: 50%;&nbsp; background-color: #333;&nbsp; color: white;&nbsp; padding: .5rem;}.bed {&nbsp; grid-column: 1;&nbsp; grid-row: 1 / 3;}.bed::after {&nbsp; content: 'BED';}.pillow {&nbsp; grid-column: 2;&nbsp; grid-row: 1 / 3;}.pillow::after {&nbsp; content: 'PILLOW';}.kitchen {&nbsp; grid-column: 3;&nbsp; grid-row: 2 / 5;}.kitchen::after {&nbsp; content: 'KITCHEN';}.living-room {&nbsp; grid-column: 1 / 3;&nbsp; grid-row: 3 / -1;}.living-room::after {&nbsp; content: 'LIVING ROOM';}.sofa {&nbsp; grid-column-start: 3;&nbsp; grid-row: 5 / -1;}.sofa::after {&nbsp; content: 'SOFA';}img {&nbsp; width: 100%;&nbsp; height: 100%;}<div class="wrapper">&nbsp; <div class="bed"><img src="http://placehold.it/300x300" alt=""></div>&nbsp; <div class="pillow"><img src="http://placehold.it/300x300" alt=""></div>&nbsp; <div class="kitchen"><img src="http://placehold.it/300x300" alt=""></div>&nbsp; <div class="living-room"><img src="http://placehold.it/300x300" alt=""></div>&nbsp; <div class="sofa"><img src="http://placehold.it/300x300" alt=""></div></div>jsFiddle
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5