Using CSS Grid to Align Images

Question

Using CSS Grid to Align Images

I want to utilize CSS 3 Grid to position specific images on my home page that I imported. The desired outcome is as follows:

https://i.sstatic.net/aYshN.jpg

Currently, my grid looks like this:

https://i.sstatic.net/oEUWX.png

Below is the code snippet:

<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;
}

How can I adjust the image positions to match the expected layout perfectly?

Update:

https://i.sstatic.net/epJ75.jpg

html css

Answer 1

Answer №1

Revision

Eliminated the specified 800px/600px height, allowing the grid to automatically occupy the entire screen.

Uniformly expanded all images to occupy the entire grid cell. Notice how the grid-row and grid-column values function. By defining the span of each grid cell, the height and width are distributed naturally throughout the grid. In this instance, I set the grid to be 800px wide and 600px tall.

I have utilized fr units for the grid specifications, ensuring relative distribution based on their relationship to other elements. The code below commands the browser to make the grid 8 units in length. The first column will constitute 3/8 of the total width (800px in this case). To balance the columns, I set the second column width to 2fr.

grid-template-columns: 3fr 2fr 3fr;

Whenever you encounter a -1 in a grid child measurement, it essentially denotes go to the end. For example, the following snippet instructs starting at row line 3 and spanning till the end, encompassing all possible lines.

grid-row: 3 / -1;

Illustration

.wrapper {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr;
  grid-template-rows: repeat(8, 1fr);
  padding: 1em;
  grid-gap: 0.5em;
  background-color: #eee;
}

.wrapper>div {
  position: relative;
}

.wrapper>div::after {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background-color: #333;
  color: white;
  padding: .5rem;
}

.bed {
  grid-column: 1;
  grid-row: 1 / 3;
}

.bed::after {
  content: 'BED';
}

.pillow {
  grid-column: 2;
  grid-row: 1 / 3;
}

.pillow::after {
  content: 'PILLOW';
}

.kitchen {
  grid-column: 3;
  grid-row: 2 / 5;
}

.kitchen::after {
  content: 'KITCHEN';
}

.living-room {
  grid-column: 1 / 3;
  grid-row: 3 / -1;
}

.living-room::after {
  content: 'LIVING ROOM';
}

.sofa {
  grid-column-start: 3;
  grid-row: 5 / -1;
}

.sofa::after {
  content: 'SOFA';
}

img {
  width: 100%;
  height: 100%;
}

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

jsFiddle

Answer 2

Revision

Eliminated the specified 800px/600px height, allowing the grid to automatically occupy the entire screen.

Uniformly expanded all images to occupy the entire grid cell. Notice how the grid-row and grid-column values function. By defining the span of each grid cell, the height and width are distributed naturally throughout the grid. In this instance, I set the grid to be 800px wide and 600px tall.

I have utilized fr units for the grid specifications, ensuring relative distribution based on their relationship to other elements. The code below commands the browser to make the grid 8 units in length. The first column will constitute 3/8 of the total width (800px in this case). To balance the columns, I set the second column width to 2fr.

grid-template-columns: 3fr 2fr 3fr;

Whenever you encounter a -1 in a grid child measurement, it essentially denotes go to the end. For example, the following snippet instructs starting at row line 3 and spanning till the end, encompassing all possible lines.

grid-row: 3 / -1;

Illustration

.wrapper {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr;
  grid-template-rows: repeat(8, 1fr);
  padding: 1em;
  grid-gap: 0.5em;
  background-color: #eee;
}

.wrapper>div {
  position: relative;
}

.wrapper>div::after {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background-color: #333;
  color: white;
  padding: .5rem;
}

.bed {
  grid-column: 1;
  grid-row: 1 / 3;
}

.bed::after {
  content: 'BED';
}

.pillow {
  grid-column: 2;
  grid-row: 1 / 3;
}

.pillow::after {
  content: 'PILLOW';
}

.kitchen {
  grid-column: 3;
  grid-row: 2 / 5;
}

.kitchen::after {
  content: 'KITCHEN';
}

.living-room {
  grid-column: 1 / 3;
  grid-row: 3 / -1;
}

.living-room::after {
  content: 'LIVING ROOM';
}

.sofa {
  grid-column-start: 3;
  grid-row: 5 / -1;
}

.sofa::after {
  content: 'SOFA';
}

img {
  width: 100%;
  height: 100%;
}

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

jsFiddle

Using CSS Grid to Align Images

Answer №1

Revision

Similar questions

Ways to ensure the footer sticks to the bottom of the page when there is minimal content

What exactly is the function of $fix-mqs within the IE Sass mixins created by Jake Archibald?

Activating a div in React.js using setActive: Step-by-step guide

Retrieve the data attribute from a select box that was created dynamically

Challenges Arising from Creating an EPL Trivia Game with HTML and Javascript

The correct method for implementing server-side rendering with JavaScript

python and html tutorial for adding text from bottom to top

Animate CSS during page load

Deliver the event target within the data-bind click HTML

Despite importing jQuery, the variable '$' cannot be located

Enable the image to extend beyond the boundaries of its containing div

When the mouse is moved to the UL LI list, the border color of the Top Hover is reverted back to default

Can a linked checkbox be created?

Access within the identical window (PHP file) as opposed to an Iframe

Concealing specific sections of HTML content in a webview on the fly

Issues with HTML marquee not functioning properly post fadeIn()

How can I calculate the width of a character in an HTML5 canvas?

The Google Docs viewer is displaying an empty screen

What is the best way to position this container in the center of the

What is the best way to generate an HTML snapshot using C#?