Menu icon Foundation

My Posts

  • 6
    Replies
  • Grid Medium-6 Large-4

    By doGus

    Foundation 5grid

    Hi everyone, I would like to know if that possible with the grid system to use medium-6 large-4 columns as I would like to display 10 boxes like 1 per row in small, 2 per row in medium and 4 per row in large screen. I may have to use the nested thin... (continued)

    Last Reply by doGus over 5 years ago



My Comments

doGus commented on Tony Stark's post over 5 years

Hi,

because your grid is incomplete 6/12, you have to put the class "end" in your last columns.

<div class="row">
        <div class="medium-2 columns a1">123</div>
        <div class="medium-2 columns a1">456</div>
        <div class="medium-2 columns a1 end">789</div>
</div>

doGus commented on doGus's post over 5 years

I think I had a typo somewhere because I'm sure that I tried as your example but the result was not good..

Now it's good thank you for your help !

doGus commented on doGus's post over 5 years

Hehe sorry for the mess, yes I want 3 columns.

In the precedent post I used your example with 4 columns with works like I would wanted if I would like to use 4 columns but I don't.

And yes I speak about the left and right limits.

Here the unfinished website : http://dl.dropboxusercontent.com/u/9629550/mif/index.html#projects

In the first part, I use medium-6 large-4 but I can't get the layout I would like.
In the second part, I use small-block-grid-1 medium-block-grid-2 large-block-grid-3, but I would like the left and right margin limits like when I use the grid.

Thanks you for your time !

edit:

I think I found a working the solution :

<div class="project-wrapper">
  <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="project-wrapper">
  <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="project-wrapper">
  <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="project-wrapper">
  <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li></li>
  </ul>
</div>
.project-wrapper {  
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 62.5rem;

  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}

doGus commented on doGus's post over 5 years

Oops.. I made a mistake in my description I mean 3 columns in large screen (large-4).

<div class="row">
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
</div>
<div class="row">
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
</div>
<div class="row">
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3 end>bleh</div>
</div>

Works as expected.

But I don't know how to do with large-4.

I tried with block-grid, it's ok but I have to figure out how I can replicate the margin like if it was inside a row.

doGus commented on doGus's post over 5 years

No, what I mean is that I have a project section and for each projects a picture (using clearing) a title and description.

I would like to have an eye icon, text or whatever in overlay for touch device on the picture and only on hover for not touch device like that users know that they can click on the picture to see the gallery of the project.

Posts Followed

No Content

Following

    No Content

Followers

My Posts



My Comments

You commented on Tony Stark's post over 5 years

Hi,

because your grid is incomplete 6/12, you have to put the class "end" in your last columns.

<div class="row">
        <div class="medium-2 columns a1">123</div>
        <div class="medium-2 columns a1">456</div>
        <div class="medium-2 columns a1 end">789</div>
</div>

You commented on doGus's post over 5 years

I think I had a typo somewhere because I'm sure that I tried as your example but the result was not good..

Now it's good thank you for your help !

You commented on doGus's post over 5 years

Hehe sorry for the mess, yes I want 3 columns.

In the precedent post I used your example with 4 columns with works like I would wanted if I would like to use 4 columns but I don't.

And yes I speak about the left and right limits.

Here the unfinished website : http://dl.dropboxusercontent.com/u/9629550/mif/index.html#projects

In the first part, I use medium-6 large-4 but I can't get the layout I would like.
In the second part, I use small-block-grid-1 medium-block-grid-2 large-block-grid-3, but I would like the left and right margin limits like when I use the grid.

Thanks you for your time !

edit:

I think I found a working the solution :

<div class="project-wrapper">
  <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="project-wrapper">
  <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="project-wrapper">
  <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="project-wrapper">
  <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li></li>
  </ul>
</div>
.project-wrapper {  
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 62.5rem;

  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}

You commented on doGus's post over 5 years

Oops.. I made a mistake in my description I mean 3 columns in large screen (large-4).

<div class="row">
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
</div>
<div class="row">
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
</div>
<div class="row">
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3 end>bleh</div>
</div>

Works as expected.

But I don't know how to do with large-4.

I tried with block-grid, it's ok but I have to figure out how I can replicate the margin like if it was inside a row.

You commented on doGus's post over 5 years

No, what I mean is that I have a project section and for each projects a picture (using clearing) a title and description.

I would like to have an eye icon, text or whatever in overlay for touch device on the picture and only on hover for not touch device like that users know that they can click on the picture to see the gallery of the project.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content