CODEWITHSUNDEEP
csscss-grid
Richard Sigar
Richard Sigar

Reputation: 3

CSS Grid with 2 rows, 4 columns, 7 items. How to center the second row?

I have 7 dynamic content to display in my page. Here is my code for the content :

<?php	if ($n==1) { ?>
<div class="large-12 columns">
	
	<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-4 partner-grid">
<?php		} ?>
		<li>
			<a href="<?php the_permalink(); ?>" class="th people-thumb">
				<span class="partners-thumb pt<?php echo $n; ?>"><img src="<?php echo $pimg; ?>" /></span>
				<h2 class="th-name"><?php the_title(); ?></h2>
			</a>
		</li>
<?php	if ($n==8) { ?>
	</ul>
	</div>
<?php		} ?>
<?php
		$n++;
	endwhile;
?>
Now it runs OK but the second row, which contains 3 items is justified to the left (as it should be).

Is there anyway to center the 3 second row items, while keeping the gap and the size like this?

Image (https://i.sstatic.net/XghyR.png)

Thanks!

Upvotes: 0

Views: 2261

Answers (3)

Supun De Silva
Supun De Silva

Reputation: 1487

Bootstrap maybe. Use some css to deal with border and Background colors

<div class="row no-gutters d-flex justify-content-center">
 <div class="col-sm-3"><div class="bg-primary text-center m-1 text-white">a</div></div>
 <div class="col-sm-3"><div class="bg-primary text-center m-1 text-white">a</div></div>
 <div class="col-sm-3"><div class="bg-primary text-center m-1 text-white">a</div></div>
 <div class="col-sm-3"><div class="bg-primary text-center m-1 text-white">a</div></div>
 <div class="col-sm-3"><div class="bg-primary text-center m-1 text-white">a</div></div>
 <div class="col-sm-3"><div class="bg-primary text-center m-1 text-white">a</div></div>
 <div class="col-sm-3"><div class="bg-primary text-center m-1 text-white">a</div></div>
</div>

Upvotes: 1

symlink
symlink

Reputation: 12209

.grid{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas: "one one two two three three four four" ". five five six six seven seven .";
    width: 80vw;
    grid-gap: 2px;
    padding: 20px;
    background: orangered;
}

.grid > div{
    border: solid dodgerblue 3px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    background: #fff;
}

.grid > div:nth-child(1){grid-area:one}
.grid > div:nth-child(2){grid-area:two}
.grid > div:nth-child(3){grid-area:three}
.grid > div:nth-child(4){grid-area:four}
.grid > div:nth-child(5){grid-area:five}
.grid > div:nth-child(6){grid-area:six}
.grid > div:nth-child(7){grid-area:seven}
<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

Upvotes: 2

Akber Iqbal
Akber Iqbal

Reputation: 15031

use flex-wrap and justify-content like in the snippet below - use the width that suits you... i used 120px for this example:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
  justify-content: center;
}

.flex-container>div {
  background-color: #f1f1f1;
  width: 120px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

Upvotes: 1

Related Questions