3

I have a very basic image gallery how can I fix it to be 3 columns by 2 rows

This is the HTML code

<div id="gallery">
    <div class="img">
        <a target="_blank" href="klematis_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a>
        <div class="descHead">
            כותרת
        </div>
        <div class="desc">
            Add a description of the image here
        </div>
    </div>
    <div class="img">
        <a target="_blank" href="klematis2_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a>
        <div class="descHead">
            כותרת
        </div>
        <div class="desc">
            Add a description of the image here
        </div>
    </div>
    <div class="img">
        <a target="_blank" href="klematis3_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a>
        <div class="descHead">
            כותרת
        </div>
        <div class="desc">
            Add a description of the image here
        </div>
    </div>
    <div class="img">
        <a target="_blank" href="klematis4_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a>
        <div class="descHead">
            כותרת
        </div>

        <div class="desc">
            Add a description of the image here
        </div>

    </div>
    <div class="img">
        <a target="_blank" href="klematis4_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a>
        <div class="descHead">
            כותרת
        </div>
        <div class="desc">
            Add a description of the image here
        </div>

    </div>
    <div class="img">
        <a target="_blank" href="klematis4_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a>
        <div class="descHead">
            כותרת
        </div>
        <div class="desc">
            Add a description of the image here
        </div>

    </div>

</div>

and this is the CSS code

#gallery{
    
}
div.img {
    margin: 2px;
    height: auto;
    width: auto;
    float: right;
}
div.img img {
    width: 200px; /* what is the img size*/
    height: 200px;
    display: inline;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 20px;
    border: 1px solid #ffffff;
}

/*
 div.img a:hover img {
 border: 1px solid #0000ff;
 }*/
div.desc {
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 30px;
}
.descHead {
    margin-right: 30px;
    margin-top: 20px;
    margin-bottom: 15px;
    font-family: Tahoma;
    font-size: 24px;
    color: #323232;
}

.desc {
    margin-right: 30px !important;
    margin-bottom: 40px !important;
    font-family: Tahoma;
    font-size: 14px;
    color: #323232;
}
1
  • 1
    Are your images guaranteed to be the same dimensions or do they vary?
    – cimmanon
    Commented Sep 18, 2012 at 13:58

2 Answers 2

2

If you cannot alter the HTML, this will do it:

.gallery {
    width: /* ((width of .image including padding/margin) * 3) */
    overflow: hidden;
    margin: /* top: 0, right: 0, bottom: -(size of .image's bottom margin), left: -(size of .image's left margin) */
    /*
    yes, that's right, the left/bottom margins are negative, but it's purely presentational
    for left floated .image, replace right with left
    */
}

Otherwise, using the CSS display properties will work.

Should also point out that section/heading/paragraph tags are probably more appropriate than meaningless div tags. Alternately, the figure/figcaption collection might also be appropriate:

http://html5doctor.com/the-figure-figcaption-elements/

0

CSS: grid

I will prefer to use grid that will create a solid code.

try this

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "img1_1 img1_2 img1_3"
    "img2_1 img2_2 img2_3";
}

.img{
  border: 1px solid #000;
  text-align: center;
}

.img1_1 { grid-area: img1_1; }

.img1_2 { grid-area: img1_2; }

.img1_3 { grid-area: img1_3; }

.img2_1 { grid-area: img2_1; }

.img2_2 { grid-area: img2_2; }

.img2_3 { grid-area: img2_3; }
<div class="grid-container">
  <div class="img img1_1"> img1_1</div>
  <div class="img img1_2"> img1_2</div>
  <div class="img img1_3"> img1_3</div>
  <div class="img img2_1"> img2_1</div>
  <div class="img img2_2"> img2_2</div>
  <div class="img img2_3"> img2_3</div>
</div>

1
  • Using grid-template-areas and grid-area is redundant, seeing as just specifying its a 3x2 grid with grid-template-rows + grid-template-columns will create the same exact layout Commented Jan 20 at 17:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.