How to allow more than 1 rows to appear horizontally

HTML & CSS
1

This is an example of what I want to achieve.

Screenshot%20(215)
Screenshot%20(215)1366×768 274 KB

but what I was able to display is 1 product per row. This is what I have done and but is not working as intended.

<ol>
<?php
    $no = 1;
    foreach($projects as $project):?>
        <?php if($project['finish'] == 'no'):?>
            <li><?=$no?></li>
            <li><?=$project['type']?></li>
            <li><?=$project['date_started']?></li>
            <li><?=$project['brief_description']?></li>
            <li><?=$project['full_description']?></li>
            <li>
                <?php foreach($images as $image):?>
                    <?php if($image['project_id'] == $project['id']):?>
                        <img src="img/<?=$image['name']?>">
                    <?php endif;?>
                <?php endforeach;?>
            </li>
            <li>
                <a href="contact.php?projectid=<?=$project['id']?>" class="button info">Contact admin</a>
            </li>
            <?php endif;?>
                if($no % 5 === 0):
                   echo "<br>";
                endif;
            <?php $no++; ?>
    <?php endforeach;?>

How can I get the code to display 5 lists per row

2

(Moved this to HTML & CSS, as it has nothing to do with PHP.)

Your OL presumably has a display: block (or inline-block) style to it, which is causing it to shift items below itself to render properly.

I’d personally recommend wrapping the list in something (like a div), and organizing the containers, rather than messing with the lists.

3

Suggest using CSS ‘grid’ or ‘flexbox’ displays for 5 <li> per row.

Optionally, the following change to the CSS section:

 ul { list-style-type: none; } /* to remove 'bullet' display */
 li { display: inline-block; }  /* default is vertical display */

within <ul> groups of 5 ‘li’ tags.

4

I think it’s going to be easier for people to help you if you show the resulting HTML code from this script and the CSS you have tried so far.

3 Likes
5

I didnt write any CSS code for it. I thought it could be done using PHP and HTML. I wont mind if I see any example of using CSS

6

can i see the example of grid

7

Substitute your images where the numbers increment in the <li> tags… Has an added benefit of being responsive.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> CSS Grid </title>
<!-- For: https://www.sitepoint.com/community/t/how-to-allow-more-than-1-rows-to-appear-horizontally/338385/5 -->
<style>
 ul { list-style-type: none; margin: 1em 0; padding: 1em 0;}
 li { display: inline-block; }  /* default is vertical display */

 .grid {
   display:grid;  
   grid-template-columns:repeat(auto-fit, minmax(200px , 1fr));
   grid-gap:10px;
 }
 .grid li {
   box-sizing:border-box;
   border:solid 2px #777; 
   background:#ccc; 
   padding:10px; 
   text-align:center;
   font-size:25px;
   font-weight:bold;
   background: lime;
 }
</style>

</head>
<body>
<h3> Grid </h3>
 <ul class="grid">
  <li>1</li>   <li>2</li>   <li>3</li>   <li>4</li>    <li>5</li>  
 </ul>
 <ul class="grid">
  <li>6</li>   <li>7</li>   <li>8</li>   <li>9</li>    <li>10</li>
 </ul>
 <ul class="grid">
  <li>11</li>  <li>12</li>  <li>13</li>  <li>14</li>   <li>15</li>
 </ul>
 <ul class="grid">
  <li>16</li>  <li>17</li>  <li>18</li>  <li>19</li>   <li>20</li>
 </ul>
 <ul class="grid">
  <li>21</li>  <li>22</li>  <li>23</li>  <li>24</li>   <li>25</li>
 </ul>
</ul>
</body>
</html>
8

Why the need for multiple uls? (unless each group of 5 is unique in some way)

Grid doesn’t need it and it’s not really semantic as they are all the same list not multiple lists :slight_smile:

I would define 5 per row in grid.

e.g.

grid-template-columns: repeat(5, 1fr);

Media queries could then reduce the columns if necessary for smaller screens. Flexbox would be better if wrapping behaviour is required.

2 Likes
9

Here’s a flex box approach that sets a max-width of 20% to allow 5 across but sets a min-width so that columns will wrap on smaller devices without the need for media queries.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.grid {
	display:flex;
	flex-wrap:wrap;
	list-style-type: none;
	margin: 1em 0;
	padding: 1em 0;
}
.grid li {
	flex:1 0 20%;
	min-width:150px;
	max-width:20%;
	border:solid 2px #777;
	background:#ccc;
	padding:10px;
	text-align:center;
	font-size:25px;
	font-weight:bold;
	background: lime;
}
</style>
</head>
<body>
<h3> Grid </h3>
<ul class="grid">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
</ul>
</body>
</html>
5 Likes
10

PaulOB: You’re right about the grid example post.
Just got carried away with the copy/paste keys :frowning:

1 Like
11

CSS controls layout and the way things look on the page.
PHP will create your HTML, but you still need CSS if you want a specific layout and look.

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.