Question

并使用CSS网格创建响应式布局。

到目前为止，我有以下内容（顺便说一句，这对cssgrid来说是很新的）：

css：

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.gridwrapper {
    margin:0 auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color: #fff;
    color: #444;
    height:100vh;

}

.box {
    background-color: #444;
    color: #fff;

    padding: 20px;
    font-size: 150%;

}

.a {
    grid-column:1;
    grid-row: 1 /span 2;
    background-image: url("images/grid2018guide/images/leftbar_02.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}
.b {
    grid-column: 2 ;
    grid-row: 1 ;
}

.b img {width:100%;}
.c {
    grid-column:3 ;
    grid-row: 1 ;
}
.d {
    grid-column: 4;
    grid-row: 1;

}
.e {
    grid-column: 2;
justify-content: center;

}

.e img {width:100%;}

html：

<body>

<div class="gridwrapper">
    <div class="box a"> </div>
    <div class="box b"><img src="images/grid2018guide/images/trendsetter.jpg"></div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e"><img src="images/grid2018guide/images/trendsetter.jpg"></div>
    <div class="box f">F</div>
    <div class="box g">G</div>
</div>

https://codepen.io/sackling/pen/QJWKBo

我正在尝试完成一些事情：

布局的整个高度/宽度
响应式图像居于其单元格内

我遇到的问题：

图像导致垂直滚动条
如果我将图像宽度设置为50％（作为测试），我将不知道如何居中。

Answer 1

结合CSS网格和CSS Flex实现成就：

html：

<div class="gridwrapper">
    <div class="box a"> </div>
    <div class="box b"><img src="https://i.imgur.com/Qn8gJmh.jpg"></div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e"><img src="https://i.imgur.com/Qn8gJmh.jpg"></div>
    <div class="box f">F</div>
    <div class="box g">G</div>
</div>

css：

*{
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    .gridwrapper {
        margin:0 auto;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        background-color: #fff;
        color: #444;
        height:100vh;

    }

    .box {
        background-color: #444;
        color: #fff;

        padding: 20px;
        font-size: 150%;

    }

    .a {
        grid-column:1;
        grid-row: 1 /span 2;
        background-image: url("https://i.imgur.com/Qn8gJmh.jpg");
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

    }

    .box:not(.a) {
    display:flex;
    justify-content:center;
}

.box:not(.a) img {
    display:block;
    width:100%;
}

https://codepen.io/carolmckayau/pen/jQOVer

使用媒体查询来控制移动版式

Answer 2

我尝试了一下，不确定是否正是您所需要的。

HTML：

<div class="gridwrapper">
    <div class="box a"><img src="https://images.unsplash.com/photo-1531923261682-53ef27714b13?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=95fb28afe334178bb4af65a319b5a96a"></div>
    <div class="box b"><img src="https://images.unsplash.com/photo-1516545952257-5fec7b2f00c0?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=61bf30ca75018d66f24307360036754b"></div>
    <div class="box c"><img src="https://images.unsplash.com/photo-1502758594676-9d84cb9bc2e6?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=632e92e24c4d13cc39a398049ed70350"></div>
    <div class="box d"><img src="https://images.unsplash.com/photo-1517895006477-9cfedb89a536?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=49c0c0bb15ef9bdd4e2bb7a62b6d69f1"></div>
    <div class="box e"><img src="https://images.unsplash.com/photo-1504716475170-e69bea1ef6b3?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b6df4e2fa5314bc9fc9a58def94f3086"></div>
    <div class="box f"><img src="https://images.unsplash.com/photo-1517895006477-9cfedb89a536?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=49c0c0bb15ef9bdd4e2bb7a62b6d69f1"></div>
    <div class="box g"><img src="https://images.unsplash.com/photo-1520880616730-aedffe34fdab?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=fac5f554f014db0556d0ce3d4220a761"></div>
</div>

Css：

body {
  height: 200vh;
}

.gridwrapper {
  background-color: #ccc;
  display: grid;
  grid-template-columns: 300px repeat(auto-fill, minmax(50px, 200px));
  grid-template-rows: repeat(4, 200px);
  grid-gap: 10px;
  grid-auto-flow: row;
  justify-content: center;
}

.box {
  background-color: #aaa;
  display: flex;
  justify-content: center;
  align-content: center;
}

.a {
  grid-row: span 2;
}

img {
   width: 100%;
   height: auto;

}

Answer 3

看起来您已经制定了100％的宽度和高度布局。您要做的是从HMTL中删除<img>标签，并仅对图像使用background属性。此样式规则：background: url(https://placeimg.com/220/220/any) center / cover;为您提供了一个居中的图像，可快速覆盖div：

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.gridwrapper {
    margin:0 auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    color: #444;
    height:100vh;
}

.box {
    background-color: #444;
    color: #fff;

    padding: 20px;
    font-size: 150%;
}

.a {
    grid-column:1;
    grid-row: 1 /span 2;
    
}

.b {
    grid-column: 2 ;
    grid-row: 1 ;
    background: url(https://placeimg.com/220/220) center / cover;
}

.b img {width:100%;}

.c {
    grid-column:3 ;
    grid-row: 1 ;
}
.d {
    grid-column: 4;
    grid-row: 1;

}
.e {
    grid-column: 2;
   background: url(https://placeimg.com/220/220/any) center / cover;

}

.e img {width:100%;}

<div class="gridwrapper">
    <div class="box a"> </div>
    <div class="box b"></div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e"></div>
    <div class="box f">F</div>
    <div class="box g">G</div>
</div>

单元格中的CSS网格响应图像

3 个答案: