Newbie Questions about CSS Grid Layout

Good morning,

I apologize for whatever inability I might have to put this into the proper terms. I have a website that I laid out in InDesign. You can find the general layout as a PNG image here (you can click on the “broken” image link to see it):

My site is starting to come along, but there seems to be a long way to go. It looks like this so far:

http://www.markallanholley.com/index.html

I suppose that I’m just looking for general advice about the CSS Grid layout so that I can bring the HTML page more in line with the PNG that I designed in InDesign. I really wish that I could be more specific. As you can see, the left side is far too small, width-wise, while the right side with the example image, (a robot in this case), is far too large and is not responsive.

You’re welcome to view the source at the HTML page and I’ll post my CSS below so that you don’t have to dig around in Inspector. If anyone can help at all I’d really appreciate, even if it’s just to steer me in the direction of what question(s) I should be asking. Thank you much.

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


p {
	padding: 10% 10%;
	font-size: 110%;
	font-family: 'Work Sans', sans-serif;
}

nav li {
	display: inline-block;
	list-style: none;
}

footer li {
	display: inline-block;
	list-style: none;
}

.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10px, 3fr));
	grid-template-rows: 1fr, 80%, 1fr;
	grid-row-gap: 5px;
	grid-column-gap: 5px;
}

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

.leftsection {
	grid-row: 2 / span 1;
	grid-column: 1 / span 1;
	
}

.divider {
	grid-row: 2 / span 1;
	grid-column: 2 / span 1;
	
}

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

.bottom {
	grid-row: 3 / span 1;
	grid-column: 1 / span 3;

}


img:hover {
	transform: scale(1.1);
}

/* unvisited link */
a:link {
	color: black;
	font-weight: bold;
	text-decoration: none;
}

/* visited link */
a:visited {
	color: gray;
	font-weight: bold;
	text-decoration: none;
}

/* mouse over link */
a:hover {
	color: purple;
	font-weight: bold;
	text-decoration: none;
}

/* selected link */
a:active {
	color: lightpurple;
	font-weight: bold;
	text-decoration: none;
} 


/* Fonts from Google Fonts */

/*
    font-family: 'Forum', cursive;
    font-family: 'Patua One', cursive;
    font-family: 'Work Sans', sans-serif;

*/

Hi there.

I think part of it is your leftsection is only taking one column. The CSS is dividing your page into three, equally split between your text, the purple divider, and the image. :slight_smile:

Excellent observation, thepitycoder. I’ve adjusted my columns a bit and everything is in the right place now. Revised CSS below. The robot image has no padding or margin as far as I can, can someone tell me why it isn’t responsive and why it’s so offset from the divider?

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


p {
	font-size: 110%;
	font-family: 'Work Sans', sans-serif;
}

nav li {
	display: inline-block;
	list-style: none;
}

footer li {
	display: inline-block;
	list-style: none;
}

.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
	grid-template-rows: 1fr, 80%, 1fr;
	grid-row-gap: 5px;
	grid-column-gap: 5px;
}

.top {
	grid-row: 1 / span 1;
	grid-column: 1 / span 6;
}

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

.divider {
	grid-row: 2 / span 1;
	grid-column: 4 / span 1;
	
}

.rightsection {
	grid-row: 2 / span 1;
	grid-column: 5 / span 2;
}

.bottom {
	grid-row: 3 / span 1;
	grid-column: 1 / span 6;

}


img:hover {
	transform: scale(1.1);
}

/* unvisited link */
a:link {
	color: black;
	font-weight: bold;
	text-decoration: none;
}

/* visited link */
a:visited {
	color: gray;
	font-weight: bold;
	text-decoration: none;
}

/* mouse over link */
a:hover {
	color: purple;
	font-weight: bold;
	text-decoration: none;
}

/* selected link */
a:active {
	color: lightpurple;
	font-weight: bold;
	text-decoration: none;
} 


/* Fonts from Google Fonts */

/*
    font-family: 'Forum', cursive;
    font-family: 'Patua One', cursive;
    font-family: 'Work Sans', sans-serif;

*/