logo
down
shadow

Dynamic number of columns and rows in a responsive layout


Dynamic number of columns and rows in a responsive layout

By : user2949083
Date : November 16 2020, 06:23 AM
it should still fix some issue Use the .hidden/.visible helper classes combined with a .clearfix with divider/border-bottom styling. It gets a little complex because you'll use a different divider div every 2nd, 3rd and 4th .col, and then even more because you'll combine them every 4th, 6th, 12th, etc (where common denominators meet up).
Here is a DEMO: http://www.bootply.com/sEAH6qXHiI
code :
<div class="row border">
    <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <!-- every 2nd col -->
    <div class="visible-xs visible-sm clearfix divider"></div>

  <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <!-- every 3rd col -->
    <div class="visible-md clearfix divider"></div>

  <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <!-- and every 4th col -->
    <div class="visible-xs visible-sm visible-lg clearfix divider"></div>

  <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
    <!-- every 6th col -->  
    <div class="visible-xs visible-sm clearfix divider"></div>
    <div class="visible-md clearfix divider"></div>

  <div class="col-xs-6 col-md-4 col-lg-3">
      <img class="thumbnail" src="//placehold.it/200x100">
    </div>
</div>


Share : facebook icon twitter icon
CSS - Can the order of layout be responsive aswell as the number of columns per row?

CSS - Can the order of layout be responsive aswell as the number of columns per row?


By : user3035121
Date : March 29 2020, 07:55 AM
wish of those help I've tried to implement your example to show this can be done using Bootstrap's column ordering classes, e.g. col-md-push-4 and col-md-pull-4.
This only works if the boxes have equal height, try adding .box--high to box A to see what sort of issues might occur if this isn't the case. These issues can be solved by nesting Bootstrap's grid classes, but you will also need to duplicate some of the boxes and show or hide them at specific layout sizes using e.g. .hidden-xs.
code :
.box {
  background-color: #d1d1d1;
  margin-bottom: 15px;  
  border-radius: 10px;
  color: #fff;
  font-size: 24px;
  line-height: 3em;
  text-align: center;
}

.box.box--blue {
  background-color: #9CCCE8;
}

.box.box--high {
  height: 5em;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 col-md-push-4">
      <div class="box box--blue">B</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-md-pull-4">
      <div class="box">A</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="box">C</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="box">D</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-md-push-4">
      <div class="box">F</div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-md-pull-4">
      <div class="box">E</div>
    </div>
  </div>
</div>
css grid layout static responsive columns and rows

css grid layout static responsive columns and rows


By : Ben Boyle
Date : March 29 2020, 07:55 AM
I wish this helpful for you I have a css grid layout (8 x 4). Preview: I have 8 cols and 4 rows. Columns are responsive (full width) with 1fr unit.
code :
.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr) minmax(200px, 1fr);
  /* overflow: hidden; */
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 15px;
  height: 100vh; /* height must be defined; see link reference below */
}


.item {
  border-radius: 3px;
  text-align: center;
  color: white;
  /* height: 140px; */
}

.progress-bar {
  grid-row: 1 / -1;
  grid-column: -2 / -1;
}

body { margin: 0; } /* remove default margins */
How to reduce the number of columns in a responsive layout?

How to reduce the number of columns in a responsive layout?


By : Andromeda Abushady
Date : March 29 2020, 07:55 AM
hope this fix your issue Its simple you can use media Query and Reduce the padding from left and right. e.g :
code :
@media screen and (max-width:500px){
 .wrapper {
     padding:30px 10px;
    } 
 .box {padding:0 10px;}
} 
Bootstrap layout - responsive rows and columns order

Bootstrap layout - responsive rows and columns order


By : user3284810
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further To change the column order, the columns must share the same parent. The only way to get this to work in Bootstrap 4 would be to disable the flexbox on lg and use floats.
code :
<div class="container-fluid">
    <div class="row mainrow d-lg-block d-flex overflow-auto">
        <div class="col-12 col-lg-8 first-column float-left">
            <div class="big-data-table">
                Imagine a big data table here
            </div>
        </div>
        <div class="col-12 col-lg-4 second-column float-right order-first">
            <div class="row myrow">
                <div class="col-12">
                    Columns inside row 2
                </div>
                <div class="col-12">
                    Columns inside row 2
                </div>
                <div class="col-12">
                    Columns inside row 2
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-4 second-column float-right">
            <div class="row myrow">
                <div class="col-12">
                    Columns inside row 3
                </div>
                <div class="col-12">
                    Columns inside row 3
                </div>
                <div class="col-12">
                    Columns inside row 3
                </div>
            </div>
        </div>
    </div>
</div>
Creating responsive rows and columns INSIDE a CSS GRID layout

Creating responsive rows and columns INSIDE a CSS GRID layout


By : Kevin Ryan
Date : October 01 2020, 04:00 PM
seems to work fine If you are already using CSS grid, why don't you just stick to it?
I would recommend not to mix more layout mechanisms and just stick to grid.
code :
<main class="g-content">
<article>
  <div class="inner-grid">
    <div class="inner-cell">
      column left
    </div>
    <div class="inner-cell">
      column right
    </div>
  </div>
</article>
</main>
@media (min-width: [SM BREAKPOINT] {
  .inner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gutter: GUTTER;
  }
}
@media (min-width: [SM BREAKPOINT] {
  .inner-grid {
    display: flex;
    flex-flow: row nowrap;
  }
  .inner-cell {
    flex: 0 0 50%;
  }
}
Related Posts Related Posts :
  • php curl headers do not return from website?
  • How to find out, if facebook ID is a user, group or page
  • Connect webhost database to android database
  • preg_match get div content with class
  • Upload multiple files in Laravel 4
  • Count array numbers in multidimensional array
  • PHP Date diff with a difference
  • Search Customer by custom field in Netsuite
  • Is it possible to hide/encode/encrypt php source code and let others have the system?
  • list items to be displayed using php code and array
  • check if row exists mysqli
  • PHP errors loading MySQL
  • setup PostgreSQL with Laravel in MAMP
  • PHP - CodeIgniter Notifications
  • Encrypting a password column in a SQL database
  • New to PHP, trying to extract information from another website
  • JavaScript AmChart to Image for Email
  • Is javascript validation enough to keep my forms secure?
  • Regex extract variables from [shortcode]
  • Download a .mp3 link and save it to computer with PHP
  • Error with the ereg_replace
  • Getting the fields attached to a bundle of an entity in Drupal
  • Php how to check multiple times (within `foreach`) if values from array exists in mysql?
  • MySQL and PHP parsing strange string
  • Pull specific data from multidimensional associative array
  • How to get the original URI extension using PHP Tonic?
  • Upload videos and images from Android to PHP server?
  • Unset a multidimensional array with another multidimensional array with values than key
  • Calling a user e-mail to add to a mailto link PHP
  • Why is override_function coming back as an undefined function
  • PHP mySQLi_fetch_all: iterate through each row
  • Using pow in php
  • What's wrong with my PHP Script? T_String issue
  • how to call a function of another file without including that file
  • is_rgb function in php
  • transform the numbers to letters using php
  • How to catch an exception from another class method PHP
  • PHP exec is blocked by ISP
  • PHP4 to PHP5 migration character encoding. latin1 vs utf8
  • Begin Transaction not defined
  • How much harm can a user do with xss on a page unique to them?
  • How to import data from a php file to javascript variable
  • PHP and Javascript - log complete workflow
  • When I echo !!! 0 it gives me a strange result
  • jquery ajax post dies after submit
  • How to upload file with curl on sftp server
  • Advanced search using a text input to search through only one category
  • Why do I get "Non-static method App\Models\Category::products() should not be called statically" in laravel
  • Stop notices from undefined indexes in arrays
  • PHP Excel Error when entering SUM function to a cell
  • laravel 4 eloquent eager load relation count
  • click submit in html and run php code
  • Extremely frustrating behavior with Internet Explorer, Bootstrap and Respond.js
  • Vkontakte vtag issues
  • Divide the number to a correct decimal
  • mysqli_insert_query not working
  • How to make a sitemap using zend framework 1
  • Laravel: array to Model with relationship tree
  • $_SERVER['DOCUMENT_ROOT'] vs $path = $_SERVER['DOCUMENT_ROOT']
  • What is the best way to store multiple checkbox values in the database and work with it later on
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org