Using grid how do I have text, and a button next to an image

user_13375328 0
Viewed 118

I am trying to have the picture be in the top left (also responsive) with "Mitchell Niesar", "CS Student", and the button on the right of the image. There should be a small gap between the image and the text as well as between the text elements themselves. I also need the button on the right, with the bottom aligned with the bottom of the image.

Currently, only the title is aligned, the subtitle is at the bottom, and the button is directly below the image. Below is what it looks like now.

Has to be done with grid.

HTML:

.logo {
  width: 100%;
  height: auto;
  max-width: 100%;
  grid-column: col-start / span 1;
  grid-column-start: 1;
  grid-row-start: 1;
  border-radius: 20%;
}

.title {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
}

.subtitle {
  grid-column-start: 2;
  grid-row-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;
  color: lightgray
}

.button {
  grid-row-start: 3;
  grid-row-end: 3;
  justify-self: center;
}

.card {
  display: grid;
  align-content: space-between;
  width: min-content;
  white-space: nowrap;
}
<html>

<head>
  <meta charset="utf-8">
  <title>
    hmwk08
  </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="card">
    <div class="logo">
      <img class="logo shadowed" src="dirt.PNG" type="text/css">
    </div>
    <div class="title">
      Mitchell Niesar
    </div>
    <div class="subtitle">
      CS Student
    </div>
    <button class="button">
      Say Hello
    </button>
  </div>
</body>

</html>

css-grid css html
1 Answers

Add the following to .button to specify the column that your button needs to go into.

grid-column-start: 2;
grid-column-end: 2;

Also, add the following to the .logo, and remove that class for the img tag

grid-row-start: 1;
grid-row-end: 4;

For obvious reasons, you might also want to change the width of your .logo :) 

.logo {
  width: 100%;
  height: auto;
  max-width: 100%;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 4;
  border-radius: 20%;
}

.title {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
}

.subtitle {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;
  color: lightgray
}

.button {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 3;
  justify-self: center;
}

.card {
  display: grid;
  align-content: space-between;
  width: min-content;
  white-space: nowrap;
}
<html>

<head>
  <meta charset="utf-8">
  <title>
    hmwk08
  </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="card">
    <div class="logo">
      <img class="shadowed" src="https://images.unsplash.com/photo-1558584724-0e4d32ca55a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60" alt>
    </div>
    <div class="title">
      Mitchell Niesar
    </div>
    <div class="subtitle">
      CS Student
    </div>
    <button class="button">
      Say Hello
    </button>
  </div>
</body>

</html>

user_132669740
Related