CSS Сетка с 2 рядами, 4 колонками, 7 шт. Как центрировать второй ряд? - PullRequest
Новая
       6

CSS Сетка с 2 рядами, 4 колонками, 7 шт. Как центрировать второй ряд?

0 голосов
/ 09 января 2020

У меня есть 7 динамических c материалов для отображения на моей странице. Вот мой код для содержания: 

<?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;
?>
Теперь все работает нормально, но вторая строка, содержащая 3 элемента, выровнена по левому краю (как и должно быть).

Есть ли в любом случае центрирование 3-х вторых элементов строки , сохраняя зазор и размер как этот?

Изображение (https://i.imgur.com/ZwdelMv.png)

Спасибо!

Ответы [ 3 ]

1 голос
/ 09 января 2020 

.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>
1 голос
/ 09 января 2020

используйте flex-wrap и justify-content, как в фрагменте ниже - используйте ширину, которая подходит вам ... я использовал 120px для этого примера: 

.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>
0 голосов
/ 09 января 2020

Bootstrap возможно. Используйте немного css для работы с цветами границ и фона 

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