Improve image grid html css-CodePudding

I am new to CSS and created a image grid by modifying code from online. The grid is now acceptable but not showing full images. Also I want images to show more attractive. I don't know much about CSS. Here is what I achieved till now.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>
    AP Graphis
</title>
<style>
    .quarter{
    position: relative;
    width: 20vw;
    height: 20vw;
    border-top-right-radius:0;
    border-top-left-radius:0;
    border-bottom-right-radius:100%;
    border-bottom-left-radius:0;
    background: orange;
}
.footer{ 
       position: fixed;        
       bottom: 0px; 
       width: 100%;
       background-color: orange; 
       color: white;
    }
    *,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; 
}

html {
  box-sizing: border-box;
  font-size: 62.5%; 
}

body {
  font-family: "Nunito", sans-serif;
  color: #333;
  font-weight: 300;
  line-height: 1.6; 
}

.container {
  width: 60%;
  margin: 2rem auto; 
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 30vw);
  grid-gap: 1.5rem; 
}
@media (max-width: 500px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
.gallery {
  display: grid;
  grid-template-columns: repeat(1, 2fr);
  grid-template-rows: repeat(9, 72vw);
  grid-gap: 1.5rem; 
}}
@media (max-width: 850px) and (min-width: 500px){
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  grid-template-rows: repeat(5, 45vw);
  grid-gap: 1.5rem; 
}
}
.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}

.gallery__item--0 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 2;  */
  /* grid-row: 1 / span 2; */
}

.gallery__item--1 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;

  /** Alternative Syntax **/
  /* grid-column: 3 / span 2;  */
  /* grid-row: 1 / span 2; */
}

.gallery__item--2 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 6;

  /** Alternative Syntax **/
  /* grid-column: 5 / span 4;
  grid-row: 1 / span 5; */
}

.gallery__item--3 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 6;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4;  */
  /* grid-row: 3 / span 3; */
}

.gallery__item--4 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 6;
  grid-row-end: 9;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4; */
  /* grid-row: 6 / span 3; */
}

.gallery__item--5 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 6;
  grid-row-end: 9;

  /** Alternative Syntax **/
  /* grid-column: 5 / span 4; */
  /* grid-row: 6 / span 3; */
}
</style>
</head>
<body>
    <h1  style="color: white;"><br>&nbsp;<u>AP GRAPHICS</u></h1><br>
    <div >
        

            <figure class=”gallery__item gallery__item--1">
                <img  src=https://ik.imagekit.io/uhozfcag82/my_file_name_AZ6AQoR8X.jpg alt=d2>
            </figure>
        

            <figure class=”gallery__item gallery__item--2">
                <img  src=https://ik.imagekit.io/uhozfcag82/my_file_name_wrIWoSfux.jpg alt=d3>
            </figure>
        

            <figure class=”gallery__item gallery__item--3">
                <img  src=https://ik.imagekit.io/uhozfcag82/my_file_name_JqSUbE6c_.jpg alt=d1>
            </figure>
        

            <figure class=”gallery__item gallery__item--4">
                <img  src=https://ik.imagekit.io/uhozfcag82/my_file_name__rNAIHf6P.jpg alt=d4>
            </figure>
        

            <figure class=”gallery__item gallery__item--5">
                <img  src=https://ik.imagekit.io/uhozfcag82/my_file_name_z_6m0EFp9.jpg alt=d5>
            </figure>
        

            <figure class=”gallery__item gallery__item--6">
                <img  src=https://ik.imagekit.io/uhozfcag82/my_file_name_2w_wCtLOn.jpg alt=d6>
            </figure>
        

            <figure class=”gallery__item gallery__item--7">
                <img  src=https://ik.imagekit.io/uhozfcag82/my_file_name_9RmTivBYv.jpg alt=d7>
            </figure>
        

            <figure class=”gallery__item gallery__item--8">
                <img  src=https://ik.imagekit.io/uhozfcag82/my_file_name_M3hCUx5Yt.jpg alt=d8>
            </figure>
        
    </div>   
    <div >
        <br>
        <div style="padding-left: 15%; display:inline;">Contact:</div><br>
        <div style="padding-left: 22%; display:inline;">Name: Abdullah Arain</div><div style="padding-left: 32%; display:inline;">Description: Graphic Designer</div><br>
        <div style="padding-left: 22%; display:inline;">Gmail: [email protected] </div><div style="padding-left: 32%; display:inline;">Number: </div><br>
        <div style="padding-left: 22%; display:inline;">Upwork: </div><div style="padding-left: 32%; display:inline;">Instagram: </div><br>
        <br>
    </div>
</body>
</html>

I don't know how to make it better. I have tried my best. I just want it to look appealing to eyes. Thanks.

CodePudding user response：

Try something with bootstrap, you don't even need CSS to make it responsive and to me seems much simpler: https://getbootstrap.com/docs/5.2/layout/grid/#example

<div >
  <div >
    <div >
      1 of 3
    </div>
    <div >
      Variable width content
    </div>
    <div >
      3 of 3
    </div>
  </div>
  <div >
    <div >
      1 of 3
    </div>
    <div >
      Variable width content
    </div>
    <div >
      3 of 3
    </div>
  </div>
</div>

You can also do carousels like this which might be a good fit for your website: https://getbootstrap.com/docs/5.2/components/carousel/#example

<div id="carouselExampleControls"  data-bs-ride="carousel">
  <div >
    <div >
      <img src="..."  alt="...">
    </div>
    <div >
      <img src="..."  alt="...">
    </div>
    <div >
      <img src="..."  alt="...">
    </div>
  </div>
  <button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span  aria-hidden="true"></span>
    <span >Previous</span>
  </button>
  <button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span  aria-hidden="true"></span>
    <span >Next</span>
  </button>
</div>

CodePudding user response：

you can try using object-fit in your gallery__img

CSS object-fit

I hope this helps