• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS Grid Issues I Need Help With

RHH

RHH

Coder
The attached screenshot is done with CSS grids and HTML. It 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. I don't know how to center the text in the first row where Name appears underlined in red; and I want to be able to set the font size. Text-align doesn't work for me nor does justify-content nor does font-size. 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.

My code is not pretty and could probably be improved in countless ways; however, it is what I have achieved through reading and trial and error (a lot of error :(). You won't hurt my feelings by criticizing it. Is it possible to control those gaps I highlighted? . . . to center and change the font size in the top row? If I'm trying to do the impossible with CSS Grid, I'd like to know. OTOH if it can be done, I want to learn how.

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: 500px;
height: 40px;
margin-top: 10px;
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: 5px;
}

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

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

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

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

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

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

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

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

.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: 5px
}

.grid-container
{
  display: grid;
  background-color: rgb(234, 217, 201);
  margin-left: auto;
  margin-right: auto;
  border-style:ridge;
  border-width: 3px;
  border-radius:20px;
  width: 860px;
  height: 540px;
  gap: 2px 1px;
  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;
  background-color: #fff;
}
 
div .name
{
text-align: center;
font-size: 16px;
}

.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: 1px;
  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: 2px;
  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: 2px;
  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: 2px;
   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: 2px;
  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: 2px;
  border-width: 2px;
  background-color: #fff;
  padding-left: 5px;
  padding-top: 2px;
}

HTML Code
Code: 
<!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>

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


If I failed to post the code correctly, please tell me what I did wrong so I don't make that mistake again.

TIAVSC Grid 1 2023-09-20_18h08_41.png
 
Sort by date Sort by votes
This part here is what is preventing the name text from centering.
CSS: 
.grid-container > div
{
  background-color: rgba(255, 255, 255, 0.8);
  text-align: left;

  padding-left: 9px;
  padding-top: 1px;
  font-size: 11px;
}

From my testing everything below this block is irrelevant and does not work.
If you align to center everything moves to center.


I added this to the css and the name centered
CSS: 
.grid-container .item1 {
  text-align: center;
}
 

Attachments

  • Kazam_screenshot_00002.png
    Kazam_screenshot_00002.png
    22.9 KB · Views: 2
Last edited:
Upvote 0 Downvote
Thanks, menator01!

I added the code snippet to the CSS file that you suggested and built on it to increase the font size and got exactly what I wanted in the first row box.
Code: 
.
grid-container .item1 {
  text-align: center;
  font-size: 22px;
}

What, exactly, is wrong with this code? I'm afraid I don't understand what you are telling me.
Code: 
.grid-container > div
{
  background-color: rgba(255, 255, 255, 0.8);
  text-align: left;

  padding-left: 9px;
  padding-top: 1px;
  font-size: 11px;
}
Click to expand...

And, I don't understand this statement: "From my testing everything below this block is irrelevant and does not work.
If you align to center everything moves to center." I don't know what block you refer to. Is it the one in the code block just above?

I might not understand it correctly, but it's my understanding that code block above (with > div) defines attributes of the child elements that will be inserted into the grid-container; so I don't understand you comment that everything below it is irrelevant. The block aligns all text to the left and sets its size to 11px for all boxes. What I didn't know how to do was to select the Name box (.item1) until you showed me how. I don't understand the part about everything below the block is irrelevant and does not work. Could you please explain? I've very new at CSS Grid and would like to understand what code doesn't work and is irrelevant.

Thanks again for you help.
 
Upvote 0 Downvote
This part is fine
CSS: 
.grid-container > div
{
  background-color: rgba(255, 255, 255, 0.8);
  text-align: left;

  padding-left: 9px;
  padding-top: 1px;
  font-size: 11px;
}

Just the code blocks below it had effect.
starting with the .name class

I tried changing background color and font size and it had no effects.
That why I said it does not do anything.
 
Upvote 0 Downvote
Thanks again, menator01.

I deleted all those class definitions starting with .name. It had absolutely no effect on my display; so you are right about the code doing nothing.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

300x250
Top Bottom