Positioning when mapping over array

HTML-CSS
1

Hi,

How can I put the title below the image?

<div>
          {images.map(image => (
            <a href={image.link}>
              <img src={image.url} />
              {image.title}
            </a>
          ))}
        </div>

08

I tried doing a <br/> after the image but that creates one image per row, when I want the images all on one row with each title beneath.

2 
div.container-for-images {
  display: flex;
  flex-flow: row wrap;
}

a.image-wrapper {
  width: calc(100% / 3);
}
3

thanks for this.

I don’t quite get what the dots are doing here, is there a related area of the curriculum I could look at?

4

What do you mean by the dots?

5

where you’ve written div.container

6

That’s CSS, like .this-is-a-class which would select something like <div className="this-is-a-class" >. I’ve written it explicitly like div.this-is-a-class because you didn’t put any classes on

7

so in the css file, you would just do

.container-for-images {
  display: flex;
  flex-flow: row wrap;
}

then in the component do:

<div className = "container-for-images">

I have seen dot notation (div.something) used just once before in CSS and don’t really get how it works.

8

That’s how CSS works. You say normally in HTML:

<div class="a-class">

Or in JSX, because class is a reserved word:

<div className="a-class">

Then in CSS anything under

.a-class {

Applies to that class.

This is literally 99% of usage of CSS. Add a class to an HTML element, apply styles to that element.

9

Yes. IDs are used sometimes too, but classes most common. :slight_smile:

10

yeah, I get that. That’s what I’m used to, I didn’t get why you were doing dot notation with div.class like that. But it’s fine - thanks.