CODEWITHSUNDEEP
csscss-grid
Sackling
Sackling

Reputation: 1820

CSS grid responsive images in cells

I am trying to take the following design and use a CSS grid to create a responsive layout.

So far I have the following (very new to CSS grid by the way):

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>
</body>

Code Pen example

I am trying to accomplish a few things:

  1. full height/width of the layout
  2. responsive images centered within their cells

Problems I am having:

  1. the images are causing a vertical scroll bar
  2. if I set the image width to 50% (as a test) I can't figure out how to center them.

Upvotes: 2

Views: 6624

Answers (3)

symlink
symlink

Reputation: 12209

It looks like you have the 100% width and height layout worked out. What you want to do is remove the <img> tags from the HMTL and just use the background property for your images. This style rule: background: url(https://placeimg.com/220/220/any) center / cover; gives you a centered image that covers the div responsively:

*{
    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>

Upvotes: 2

Enes T.
Enes T.

Reputation: 167

I gave it a try, not sure if it's exactly what you need.

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;

}

Upvotes: 0

Carol McKay
Carol McKay

Reputation: 2424

combine css grid with css flex for your achievement:

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

use media querie/s to manipulate for mobile layout

Upvotes: 0

Related Questions