Trying to create a grid of divs

[Jim R]

Here is the link:  

 

http://courtsideindiana.com/tag/aaron-henry/

 

On the page could be instances ranging anywhere from 1 to 9, getting information from a database.  I'd like them to create a grid of 3 columns across, each row as tall as the tallest instance.  This is for a standard sized web page.  (On a phone, it should be just one instance for per row.)

 

I have the container set up as display:  table and each DIV set up as display:  table-cell.  It's not working (of course).

 

Here is the PHP:

echo '<div class="review_container">';

$query = "SELECT * FROM a_players_reviews
	WHERE CONCAT(nameFirst,' ', nameLast) = '".$slug."' order by id desc limit 9";

$results = mysql_query($query);
echo mysql_error();
while($review = mysql_fetch_assoc($results)) {

$date = date("F j, Y", strtotime($review['time']));

	 echo '<div class="review_column">';
	 	
	 	// Event, game opponent or just a general assessment
	 		
	 		// This is if it's a single game
	 		if (isset($review['opp_school'])) {
				echo '<span class="opponent">vs.  ';
		
				if (isset($review['opp_city'])) {	 
					echo  $review['opp_city'] . ' (';
					}
				echo $review['opp_school'];
					if (isset($review['opp_city'])) {
						echo ')';
					}
				echo '</span>';
				}	
					
			// If this is about an event		 		
			elseif (isset ($review['event'])) {
				echo '<span class="opponent">Event:  ' . $review['event'] . '</span>';	
				}
			// Just a general assessment	
			else {
				echo '<span class="opponent">Assessment</span>';
				}	
	 			
	// Finish up with the date and the review
	echo '<span class="review_date"><b>' . $date . '</b></span>
	<span class="review">' . $review['review'] . '</span>
	</div>';

}

echo '</div>';
echo '<div class="clear"></div>';

Here is the CSS:

.review_container {
	display: table;
	margin-left: 20px;
	
}


.review_container div {
	float: left;
	width: 33%;
	padding: 5px;
	border-right: 1px;
}

.review_container span {
	display: block;
}

.review_column {
	display: table-cell !important;

}
 
 .review_date {
 	color: #ccc;
 }
 
 .opponent {
 	font-size: 18px;
 	font-weight: bold;
 }

Edited December 17, 2017 by Jim R

[requinix]

Ever used Bootstrap? Seen how its grid system works? You have something like that already: .td-pb-row and .td-pb-span1-12.

 

Put each "row" of 3 in a .td-pb-row and each "cell" in the right .td-pb-span* such that there's 3 per row.

 

And forget most of that CSS you've written. Don't need it.

[Jim R]

Ever used Bootstrap? Seen how its grid system works? You have something like that already: .td-pb-row and .td-pb-span1-12.

 

Put each "row" of 3 in a .td-pb-row and each "cell" in the right .td-pb-span* such that there's 3 per row.

 

And forget most of that CSS you've written. Don't need it.

 

I'll dig more into bootstrap, but as I have implemented header code and scripts, it's created a conflict with images.  

 

 

The CSS I used came from W3school.com.  Are you saying there is no way to make it work via regular CSS?

[requinix]

This is "regular CSS".

[Jim R]

Yeah, but I have to link to upload directories of files and/or place >scripts< in locations which will get overwritten any time I update the theme.  

[requinix]

I have no idea what you're talking about.

 

Your existing CSS has rules you can make use of to get the result you want. What is the problem?

[Jim R]

Am I going to have to account for rows?  Because I'm not really hard coding how many rows there will be.  It could be one.  I could be three. 

Edited December 18, 2017 by Jim R

[Jim R]

I have no idea what you're talking about.

 

Your existing CSS has rules you can make use of to get the result you want. What is the problem?

 

Bootstrap are files I have to upload or link to.  

[requinix]

Forget I mentioned it. You clearly didn't notice the "you have something like that already" and fixated on the "Bootstrap", which apparently drove your imagination wild - and in entirely the wrong direction.

 

No. You do not have to account for the rows in the way you're thinking. Yes, you do have to account for the rows in the sense that you said you wanted three per row normally so your markup should resemble that.

<div class="the class that does rows">
	<div class="the class that does a cell">...</div>
	<div class="the class that does a cell">...</div>
	<div class="the class that does a cell">...</div>
</div>

Repeat for all the rows you need.

[Jim R]

Ok, but even at that, I don't have fixed number of rows or even columns.  I'll have over 1,000 pages like that, created dynamically.  Most will have one thing written about them in that area.  Others anywhere from two to nine.  I'm not hardcoding all the divs or the rows.

 

I'd rather not give them a fixed height.  

[Jim R]

I found this, and it works:

 

.review_container {

display: table;

margin-left: 20px;

display: flex;

flex-wrap: wrap;

 

}