Is it possible for me to adjust the height of my grid rows to perfectly match the displayed

Is it possible to create a CSS grid with equal row heights that fill the visible height of the container even if there are more grid items than can fit? I have attached an image for reference on how it should work. I have tried using flexbox in a horizontal layout, but I don't think it's achieving the desired result.

https://i.sstatic.net/iCm9S.png

.container {
               display: grid;
               background: white;
               grid-template-rows: auto;
              }
      
             .row{
              font-size: 3rem;
               border: solid black 1px;
              }
<div class="container">
                <div class="row">
                  row1
                 </div>
                    .
                    .
                    .
                    (additional rows)
                 <div class="row">
                   row8
                 </div>
                 </div>

The goal is for the rows to always fill the visible height of the container, even if there are more than a predetermined number of rows like say, 4.

htmlcssflexboxcss-grid

Answer №1

If you're looking to adjust the grid rows dynamically, consider using 

grid-template-rows: repeat(9, auto);
. Remember to update the number in the function based on the row count in your HTML for accurate alignment. For more information, refer to this link: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

To center the content/text within the lines, simply include these properties in your .row class: display: flex; align-items: center;

Sample code: 

.container {
  height: 1000px;
  border: 1px solid red;
  display: grid;
  background: white;
  grid-template-rows: repeat(9, auto);
}

.row{
  font-size: 3rem;
  border: solid black 1px;
}
<div class="container">
  <div class="row">
    row1
  </div>
  <div class="row">
    row2
  </div>
  <div class="row">
    row3
  </div>
  <div class="row">
    row4
  </div>
  <div class="row">
    row5
  </div>
  <div class="row">
    row6
  </div>
  <div class="row">
    row7
  </div>
  <div class="row">
    row8
  </div>
  <div class="row">
    row9
  </div>
</div>

Non-functional example (for illustrative purposes): 

.container {
  height: 1000px;
  border: 1px solid red;
  display: grid;
  background: white;
  grid-template-rows: repeat(9, 100px);
}

.row{
  font-size: 3rem;
  border: solid black 1px;
}
<div class="container">
  <div class="row">
    row1
  </div>
  <div class="row">
    row2
  </div>
  <div class="row">
    row3
  </div>
  <div class="row">
    row4
  </div>
  <div class="row">
    row5
  </div>
  <div class="row">
    row6
  </div>
  <div class="row">
    row7
  </div>
  <div class="row">
    row8
  </div>
  <div class="row">
    row9
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a focal point by placing an image in the center of a frame

How can an image be placed and styled within a div of arbitrary aspect ratio to ensure it is inscribed and centered, while maintaining its position when the frame is scaled? Ensure the image is both inscribed and centered Set dimensions and position usin ...

javascripthtmlcss

php Use cURL and the DOM to extract content with specified CSS styling

Unclear in the title, I want to copy all content from a specific div on an existing webpage (not owned by me). The code successfully extracts the content. Extractor code: // Get Data $curl_handle=curl_init(); curl_setopt($c ...

phpjqueryhtmlcsscurl

Arranging elements in HTML for Manipulating with JavaScript

I haven't started coding yet, but I'm contemplating the overall strategy. My front end is primarily composed of HTML tables, giving it an Excel-like appearance. I am considering generating default pages and then using JavaScript to dynamically m ...

javascripthtmlcss

What is the best way to adjust the CSS height of an HTML select element to 100% within a table cell in Internet Explorer

Is it possible to make a select (dropdown list) element fill out 100% of the table cell height? I was successful in getting it to work in Firefox and Chrome, but unfortunately not in IE (Internet Explorer). Here is the test HTML code: <table> & ...

htmlcssinternet-explorer

Ways to Utilize CSS for Substituting Text

Is there a way to change Type： to Class： using CSS? <span class="skills">Type：<a href="....../type/aaa/">aaa</a>, <a href="...../type/bbb/">bbb</a></span> ...

htmlcss

AJAX: Displaying the contents of a folder. Issue with URL resolution

I'm attempting to showcase a collection of images stored in a specific folder within a div. My approach involves utilizing AJAX within a JavaScript file titled edit, which is positioned one directory away from the index route. This implementation is b ...

javascriptjqueryhtmlnode.jsajax

Unfortunately, CSS3 PIE is not compatible with border-radius and box-shadow properties

I created a basic HTML/CSS code for testing purposes, but I'm having trouble getting the library to function properly. I've placed the .htc, .php and .js files in the same directory as index.html, but it just won't work. Check out the code ...

javascripthtmlcsscross-browser

Is there a way to make the table header stretch across the entire table when using display properties to simulate a <table>?

I made a switch from an old table to a new one constructed using Divs, and everything seems to be working fine except for one issue. I am trying to create a header that spans the entire width of the table without having multiple cells in the heading like i ...

htmlcss

disable input box stationary

Is there a way to make a checkbox stay disabled even after refreshing the page? Currently, when I click the checkbox it disables, but upon refreshing the page, it goes back to being enabled. $( "input[type='checkbox']").click(function(event){ ...

javascriptjqueryhtml

How can I change the transparency of a CSS background color using JavaScript?

I have a question about CSS: .class1 { background: #fff } Now, I need to achieve the following: .class2 { background: rgba(255,0,0,0.5) }; Is there a way to use JavaScript only to change the background property of .class1 and give it an opacity of 0.5? ...

javascriptcss

Tips for loading Google fonts quickly using Font Face Observer

Upon reading an enlightening article on the optimal methods for serving web fonts, I was eager to employ the innovative javascript library known as Font Face Observer to asynchronously load Google fonts on my website. The documentation states that "fonts ...

javascriptcssfontswebfontsgoogle-webfonts

The options in the form select dropdown are not correctly positioned

I am new to using Jquery. I am attempting to create a submit form with a select option in it. However, the drop-down options are not displaying correctly. They appear slightly above and to the left of where they should be.https://i.sstatic.net/xZecM.png I ...

javascriptjqueryhtmlcss

PHP and MySQL combination for efficient removal of multiple dropdown choices

I'm struggling to figure this out. Essentially, it's a form with multiple dropdown menus where users can select one or more items to filter MySQL data results. I want to dynamically update the other dropdown menus as the user makes selections. Fo ...

javascriptphpjqueryhtmlmysql

Tips for increasing the size of a parent div when a child div is displayed with a set width?

Is there a way to make the parent div automatically expand when the child div with a fixed width is displayed onclick? Goal: I want the child div to show up when I click the link, and at the same time, I need the parent div to expand or scale to fit the ...

jqueryhtmlcss

HTML/JS Implementation: Back to Top Visual Element

- This website appears to be quite simple at first glance. However, I have encountered an issue where every time I scroll down and then click on the "About" menu option, it abruptly takes me back to the top of the page before displaying the section with a ...

javascriptjqueryhtmlcss

The symbol "#" appears in my URL whenever the link is clicked

Seeking guidance on a URL issue that I am facing. Whenever I click the source link, it adds a pound sign to the URL. How can I prevent this from happening? Can someone assist me in identifying the necessary changes required in my jQuery or HTML code? Bel ...

javascriptjqueryhtml

Securing some room beneath the table

I need some extra room below my table. <table border="0" class="medtable"> <tr> <th>User</th> <th>From</th> <th>To</th> </tr> <tr> ... </tr> ...

csshtml-table

Inconsistency in naming of jQuery CSS properties

Can you explain the reason behind the difference in property names: $(elem).css('padding-top') compared to $(elem).css('marginTop') ? Wouldn't it make more sense if we use: $(elem).css('margin-top') instead? ...

jquerycss

Achieving a Banner-Like Background Image Using CSS

I've been studying various website source codes, but I'm struggling to achieve a specific effect. I want to have an image as the background that sits behind everything on the page. However, I don't want the entire background to be covered by ...

htmlasp.netcss

The Battle of Priority: Conflicting !Important Declarations in CSS

I'm currently revamping a CSS template created by previous developers. I've noticed that a specific block is duplicated, with one version hidden for wide-screen display and the other hidden for smaller screens. It's unclear why two separate ...

csstwitter-bootstrapbootstrap-4