Menu icon Foundation
How to center two size 3 columns in a row?

I am building my project using the sass float grid. My row is an unordered list and the list items are the columns. Currently i have two list items with a size of 3, the first is floated left while the last is floated right. How can i have it so they are adjacent to each other and centered in the row?

I have tried using @include grid-column-position(center) but that just centers them below one another.

 

html

<ul class="team__list">
	<li class="team__member">
		<img src="" alt="" class="team__member-image">
		<p class="team__member-name">Name</p>
		<p class="team__member-title">Title</p>
		<a href="" class="team__member-full">Meet Me</a>
		<a href="" class="team__member-email">Email Me</a>
		<a href="" class="team__member-tel">Number</a>
	</li>
	<li class="team__member">
		<img src="" alt="" class="team__member-image">
		<p class="team__member-name">Name</p>
		<p class="team__member-title">Title</p>
		<a href="" class="team__member-full">Meet Me</a>
		<a href="" class="team__member-email">Email Me</a>
		<a href="" class="team__member-tel">Number</a>
	</li>
</ul>

 

scss

.team__list {
    @include grid-row;
}

.team__member {
    @include grid-column(3);

    list-style-type: none;
    text-align: center;
}

centeredcolumnsrowfloat-gridSasscss

I am building my project using the sass float grid. My row is an unordered list and the list items are the columns. Currently i have two list items with a size of 3, the first is floated left while the last is floated right. How can i have it so they are adjacent to each other and centered in the row?

I have tried using @include grid-column-position(center) but that just centers them below one another.

 

html

<ul class="team__list">
	<li class="team__member">
		<img src="" alt="" class="team__member-image">
		<p class="team__member-name">Name</p>
		<p class="team__member-title">Title</p>
		<a href="" class="team__member-full">Meet Me</a>
		<a href="" class="team__member-email">Email Me</a>
		<a href="" class="team__member-tel">Number</a>
	</li>
	<li class="team__member">
		<img src="" alt="" class="team__member-image">
		<p class="team__member-name">Name</p>
		<p class="team__member-title">Title</p>
		<a href="" class="team__member-full">Meet Me</a>
		<a href="" class="team__member-email">Email Me</a>
		<a href="" class="team__member-tel">Number</a>
	</li>
</ul>

 

scss

.team__list {
    @include grid-row;
}

.team__member {
    @include grid-column(3);

    list-style-type: none;
    text-align: center;
}
getuxi 10 months ago

same issue for me

bella43 4 months ago

You are still facing the issue?

Siavoush 3 months ago

@bella43 

Hey, I used flexbox to get around it and floated the last element to the left for IE9, not sure if it's the best way but it works for me. Hope it helps :)

.team__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.team__member:last-child:not(:first-child) {
    float: left;
}