Jump to content

CSS Grid

ahr aitch

By ahr aitch
in CSS

 Share

Recommended Posts

ahr aitch Newbie

ahr aitch

Posted
Posted (edited)

This screen is done with grids and gets 99% of the way to my final goal.  Fixing the inter-box spacing and centering text in the Name box will get it the rest of the way.  In the screenshot attached, I drew green rectangles around areas that I want to shrink but cannot figure out how.  I've tried margins and setting gaps to no avail.  Also, I want to center align the text in the top rectangle where Name appears underlined in red; and I want to set the font-size to about 15px.  Text-align doesn't work nor does justify-content nor does font-size for me.  I've been through the W3c tutorials numerous times without finding my answers.  I've also searched for articles and YTs without finding one that addresses my issues.

Any help will be greatly appreciated.

CSS 

item1 
{ 
grid-area: name; 
width: 600px;
height: 40px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style:ridge; 
border-width: 5px;
border-radius:10px;
}

.item2 
{ 
grid-area: photo; 
width: 245px;
height: 225px;
margin-left: 70px;
border-style:ridge; 
border-width: 2.5px;
border-radius:20px;
}

.item3 
{ 
grid-area: birth; 
width: 75px;
height: 65px;
border-style:ridge; 
border-width: 2.5px;
border-radius:20px
}

.item4 
{ 
grid-area: birth-details; 
width: 300px;
height: 65px;
border-style:ridge; 
border-width: 2.5px;
border-radius:20px
}

.item5 
{ 
grid-area: marriage; 
width: 75px;
height: 65px;
border-style:ridge; 
border-width: 2.5px;
border-radius:20px
}

.item6 
{ 
grid-area: marriage-details;
width: 300px;
height: 65px;
border-style:ridge; 
border-width: 2.5px;
border-radius:20px
}

.item7 
{ 
grid-area: death;
width: 75px;
height: 65px;
border-style:ridge; 
border-width: 2.5px;
border-radius:20px
}

.item8 
{ 
grid-area: death-details;
width: 300px;
height: 65px;
border-style:ridge; 
border-width: 2.5px;
border-radius:20px
}

.item9 
{ 
grid-area: children;
width: 700px;
height: 35px;
margin-right: auto;
margin-left: auto;
border-style:ridge; 
border-width: 2.5px;
border-radius:20px
}

.item10 
{ 
grid-area: bio; 
width: 700px;
height: 95px;
margin-right: auto;
margin-left: auto;
border-style:ridge; 
border-width: 2.5px;
border-radius:20px
}

.item11 
{ 
grid-area: thumbnails; 
width: 700px;
height: 55px;
margin-left: auto;
margin-right: auto;
margin-left: auto;
border-style:ridge; 
border-width: 2.5px;
border-radius:20px
}

.grid-container 
{
  display: grid;
  background-color: rgb(234, 217, 201);
  row-gap: .25px;
  margin-left: auto;
  margin-right: auto;
  border-style:ridge; 
  border-width: 3px;
  border-radius:20px;
  width: 860px;
  height: 540px;
  grid-template-areas:
    'name name name name name name'
    'photo photo birth birth-details birth-details birth-details'  
    'photo photo marriage marriage-details marriage-details marriage-details'
    'photo photo death death-details death-details death-details'
    'bio bio bio bio bio bio'
    'children children children children children children'
    'thumbnails thumbnails thumbnails thumbnails thumbnails thumbnails';
}

.grid-container > div 
{
  background-color: rgba(255, 255, 255, 0.8);
  text-align: left;
  padding-left: 9px;
  padding-top: 1px;
  font-size: 11px;
}


.name
{
  display: grid;
  width: 600px;
  height: 30px;
  margin-top: 5px;
  margin-bottom: 8px;
  border-style: ridge; 
  border-width: 6px; 
  border-radius: 5px;
  padding-left: 5px;
  padding-top: 3px;
  padding-bottom: 2px;
  background-color: #fff;
}
  
.photo
{
  display: grid;
  margin-bottom: 1px;
  width: 225px;
  height: 225px;
  border-style:ridge;
  border-radius: 5px; 
  border-width: 2.5px; 
  background-color: #fff;
}

.birth-legend
{
  display: grid;
  width: 75px;
  height: 60 px;
} 

.birth-details
{
  display: grid;
  width: 300px;
  height: 60px;
  margin-left: 290px;
  margin-bottom: 1px;
  border-style: ridge;
  border-radius: 5px; 
  border-width: 2px; 
  background-color: #fff;
  padding-left: 5px;
  padding-bottom: 2px;
  text-align: center;
}

.marriage-legend
{
  display: grid;
  width: 75px;
  height: 60;
  margin-left: 295px;
  
}

.marriage
{
  display: grid;
  margin-left: 290px;
  margin-bottom: 1px;
  width: 400px;
  height: 60px;
  border-style: ridge;
  border-radius: 5px; 
  border-width: 2px; 
  background-color: #fff;
  padding-left: 5px;
  padding-top: 2px;

}

.death-legend
{
  display: grid;
  width: 75px;
  height: 60px
  margin-left: 295px;
 
}

.death
{
  display: grid;
  margin-left: 290px;
  margin-bottom: 1px;
  width: 400px;
  height: 60px;
  border-style: ridge;
  border-radius: 5px; 
  border-width: 2px; 
  background-color: #fff;
  padding-left: 5px;
  padding-top: 2px;
}
  
.bio
{
   display: grid;
   margin-bottom: 3px;
   width: 730px;
   height: 60px;
   border-style: ridge;
   border-radius: 5px; 
   border-width: 2px; 
   background-color: #fff;
   padding-left: 5px;
   padding-top: 2px;
} 

.children
{
  display: grid;
  margin-bottom: 3px;
  width: 730px;
  height: 60px;
  border-style: ridge;
  border-radius: 5px; 
  border-width: 2px; 
  background-color: #fff;
  padding-left: 5px;
  padding-top: 2px;
}

.thumbnails
{
  display: grid;
  margin-bottom: 1px;
  width: 730px;
  height: 60px;
  border-style: ridge;
  border-radius: 5px; 
  border-width: 2px; 
  background-color: #fff;
  padding-left: 5px;
  padding-top: 2px;
}

 

HTML 

<!DOCTYPE html>
<html lang="en-us">
<head>
	<meta http-equiv="content-type" content="text/html" 
    charset=UTF-8>
    <link rel="stylesheet" type="text/css" 
    href="styles.css" media="screen" />
      <title="the-clan">GRID</title>
  </head>
  <body> 
    <style>
     
      </style>
      </head>
      <body>
      
        <div class="grid-container">
          <div class="item1">Name</div>
          <div class="item2">Photo</div>
          <div class="item3">Birth</div>  
          <div class="item4">Date:<br>
                             Place:<br>
                             Mother:<br>
                             Father:</div>
          <div class="item5">Marriage</div>
          <div class="item6">Spouse:<br>
                             Date:<br>
                             Place:</div>
          <div class="item7">Death</div>
          <div class="item8">Date:<br>
                             Place:<br>
                             Burial: </div>
          <div class="item9">Children</div>
          <div class="item10">Bio </div>
          <div class="item11">Thumbnails</div>
        </div>
      </body>
      

</html>

 

VSC Grid 1 2023-09-20_18h08_41.png

Edited by ahr aitch
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

I thought I could make a couple of changes and explain how to fix it, but rewriting it to make it simpler was a better option.

You don't need to set widths, heights and margins on everything. The grid divides all the space evenly into columns and rows which already have their width and heights automatically set. If you set a width, the box will change its size, but nothing around it will relocate to account for that because the space reserved for it by the grid hasn't changed.

Here's some simplified CSS and I updated the class names in the HTML to be more meaningful. I fixed some mismatched <head> and <body> tags which might mess with the layout as well. 

<!DOCTYPE html>
<html lang="en-us">
<head>
	<meta http-equiv="content-type" content="text/html" 
    charset=UTF-8>
    <link rel="stylesheet" type="text/css" 
    href="styles.css" media="screen" />
      <title>GRID</title>
</head>
<body>
      
  <div class="grid-container">
    <div class="name">Name</div>
    <div class="photo">Photo</div>
    <div class="birth">Birth</div>  
    <div class="birth-details">Date:<br>
                       Place:<br>
                       Mother:<br>
                       Father:</div>
    <div class="marriage">Marriage</div>
    <div class="marriage-details">Spouse:<br>
                       Date:<br>
                       Place:</div>
    <div class="death">Death</div>
    <div class="death-details">Date:<br>
                       Place:<br>
                       Burial: </div>
    <div class="children">Children</div>
    <div class="bio">Bio </div>
    <div class="thumbnails">Thumbnails</div>
  </div>
</body>
      

</html>

CSS 

.grid-container 
{
  display: grid;
  background-color: rgb(234, 217, 201);
  row-gap: .25px;
  margin-left: auto;
  margin-right: auto;
  border-style:ridge; 
  border-width: 3px;
  border-radius:20px;
  width: 860px;
  grid-template-areas:
    'name name name name name name name name'
    'photo photo photo birth birth-details birth-details birth-details birth-details'  
    'photo photo photo marriage marriage-details marriage-details marriage-details marriage-details'
    'photo photo photo death death-details death-details death-details death-details'
    'bio bio bio bio bio bio bio bio'
    'children children children children children children children children'
    'thumbnails thumbnails thumbnails thumbnails thumbnails thumbnails thumbnails thumbnails';
}

.grid-container > div 
{
  background-color: rgba(255, 255, 255, 0.8);
  text-align: left;
  padding-left: 9px;
  padding-top: 1px;
  font-size: 11px;
  border-style:ridge; 
  border-width: 2.5px;
  border-radius:20px;
  margin: 5px;
}

.grid-container > .name
{ 
  grid-area: name;
  height: 40px;
  margin-left: 130px;
  margin-right: 130px;
  margin-bottom: 10px;
  text-align: center;
  border-style:ridge; 
  border-width: 5px;
  border-radius:10px;
}
.photo { grid-area: photo; }
.birth { grid-area: birth; }
.birth-details { grid-area: birth-details; }
.marriage { grid-area: marriage; }
.marriage-details { grid-area: marriage-details;}
.death { grid-area: death;}
.death-details { grid-area: death-details; }

.children 
{ 
  grid-area: children;
  height: 35px;
}

.bio 
{ 
  grid-area: bio; 
  height: 95px;
}

.thumbnails 
{ 
  grid-area: thumbnails; 
  height: 55px;
}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...