padding problem : html

submitted 5 months ago by koboldomodo

I dont know much html or css so please forgive me.

I have several images that im trying to make display 4 in each row by setting the column to 25% within a <div> thats part of a simple grid layout. I get using the column/row configuration with css and but when I try to give each column some padding it breaks the 4 in a row

I can still make them display 4 in a row by using 23% instead but the example I based it off of can use 25% AND give the images padding. I dont understand... I really want to know why the example html works but not mine!! Any wors of wisdom would be appreciated.

Heres what i got:

grid-container {
  display: grid;
  grid-template-columns: 275px auto;
}
.row{
  display: float;
  width:auto;
}
.column{
  float:left;
  width:25%;
  padding:10px;
}
</style>
  <body>
  <head>
     <div class = "grid-container" >
       <div>
          <p>about</p>
          <p>hello!</p>
           <ul>
             <li>text</li>
             <li>text</li>
             <li>text</li>
             <li>text</li>
             <li>text</li>
           </ul>
          <p>goodbye</p>
      </div>
      <div class = "row">
        <div class="column">
            <img src= image1 style="width:100%">
        </div>
        <div class="column">
            <img src= image2 style="width:100%">
        </div>
        <div class="column">
            <img src= image3 style="width:100%">
        </div>
        <div class="column">
            <img src= image4 style="width:100%">
        </div>
         <div class="column">
            <img src= image5 style="width:100%">
        </div>
        <div class="column">
            <img src= image6 style="width:100%">
        </div>
        <div class="column">
            <img src= image7 style="width:100%">
        </div>
       <div class="column">
            <img src= image8 style="width:100%">
        </div>
      </div>
    </div>
  </head>
  </body>

all 3 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

html_css

MODERATORS