Jump to content
Jim R

Trying to create a grid of divs

Recommended Posts

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 by Jim R

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.  

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 by Jim R

Share this post


Link to post
Share on other sites

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.  

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.  

Share this post


Link to post
Share on other sites

I found this, and it works:

 

.review_container {

display: table;
margin-left: 20px;
display: flex;
flex-wrap: wrap;
 
}

Share this post


Link to post
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

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.