CSS网格-自适应-多3列行到2列行

时间:2019-01-04 19:15:51

标签: css css3 css-grid

我正在创建具有3列网格的多行页面,但是在Tablet中,请更改为2列网格和移动1列网格。

在Tablet中,当创建2列网格时,它将在末尾创建一个空列。

是否可以同时连接两行,所以第二行占据了第一行的空白点?

还是唯一的机会是将列组织在一行中?

library(shiny)
library(ggplot2)

AUI<-function(id){

  ns<-NS(id)

  fluidPage(

    selectInput(ns("logX"), "Log scale",
                choices=coordoptions,
                selected="identity"),
    selectInput(ns("logY"), "Log scale",
                choices=coordoptions,
                selected="identity"),

    tags$head(tags$style('
                       #my_tooltip {
                       position: absolute;
                       width: 300px;
                       z-index: 100;
                       padding: 0;
                       }
                       ')),

    tags$script('
              $(document).ready(function() {
              // id of the plot
              $("#distPlot").mousemove(function(e) { 

              // ID of uiOutput
              $("#my_tooltip").show();         
              $("#my_tooltip").css({             
              top: (e.pageY + 5) + "px",             
              left: (e.pageX + 5) + "px"         
              });     
              });     
              });
              '),

    selectInput(ns("var_y"), "Y-Axis", choices = names(iris)),
    plotOutput(ns("distPlot"), hover = ns("plot_hover"), hoverDelay = 0),
    uiOutput(ns("my_tooltip"))

  )
}  


A <- function(input, output, session) {

  ns<-session$ns

  output$distPlot <- renderPlot({
    req(input$var_y)
    ggplot(iris, aes_string("Sepal.Width", input$var_y)) + 
      geom_point() +
      scale_x_continuous(trans=input$logX) + 
      scale_y_continuous(trans=input$logY) 
  })

  output$my_tooltip <- renderUI({
    hover <- input$plot_hover 
    y <- nearPoints(iris, input$plot_hover)[input$var_y]
    req(nrow(y) != 0)
    verbatimTextOutput(ns("vals"))
  })

  output$vals <- renderPrint({
    hover <- input$plot_hover 
    y <- nearPoints(iris, input$plot_hover)[input$var_y]
    req(nrow(y) != 0)
    y
  })  
}

ui<-AUI("id")

server <- function(input, output, session){
      callModule(A, "id")
}


shinyApp(ui = ui, server = server)

2 个答案:

答案 0 :(得分:0)

这有望使您朝着正确的方向前进。

我已经完成了CSS,所以它可以移动了。因此,第一种媒体查询是针对平板电脑的,第二种媒体查询是针对台式机的,而width: 100%是针对移动设备的,因此显然将显示一列。您可以对其进行修改以适合您的需求。试一试,如有任何问题,我会看一看:)

FlexBox方法

  

flex-direction flex-direction CSS属性设置如何将flex项目放置在flex容器中,以定义主轴和方向(法向或反向)。看一下示例here

     

flex-flow flex-flow CSS属性是flex-direction和flex-wrap属性的简写属性。阅读here

     

justify-content 。CSS justify-content属性定义浏览器如何沿着Flex容器的主轴和网格容器的内联轴在内容项之间及其周围分配空间。阅读here

.grid-container {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
}

.grid-item {
  display: flex;
  background-color: orange;
  width: calc(100% - 10px);
  margin: 5px
}

@media (min-width: 720px) {
  .grid-item {
    width: calc(33.333% - 10px);
  }
}

@media (min-width: 1020px) {
  .grid-item {
    width: calc(25% - 10px);
  }
}
<div class='grid-container'>
  <div class='grid-item'>item 1</div>
  <div class='grid-item'>item 2</div>
  <div class='grid-item'>item 3</div>
  <div class='grid-item'>item 4</div>
  <div class='grid-item'>item 5</div>
  <div class='grid-item'>item 6</div>
</div>

请记住,如果您将边距值更改为20px,则在执行此操作时还必须更改width值:

width: calc(grid-item-desired-width% - margin);

我真的建议阅读上面的链接,因为它们都有交互式演示,它们将为您提供这些flexbox属性如何工作的直观示例。我还建议您仅使用flex-box,并尝试不同的值以了解它们如何作用于网格。这是学习它并将其卡在您脑海中的最佳方法。希望以上内容对您有所帮助。

CSS网格方法

另一种方法是使用CSS Grid。不确定您想要什么方式,但我个人会选择flexbox。如果您想在下面使用CSS网格方法

.grid-container {
  display: grid;
  grid-template-columns: auto;
  padding: 10px;
  grid-gap: 10px 10px;
}

.grid-item {
  border: 1px solid black;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

@media (min-width: 720px) {
  .grid-container {
    grid-template-columns: auto auto auto;
  }
}

@media (min-width: 1020px) {
  .grid-container {
    grid-template-columns: auto auto auto auto;
  }
}
<div class='grid-container'>
  <div class='grid-item'>item 1</div>
  <div class='grid-item'>item 2</div>
  <div class='grid-item'>item 3</div>
  <div class='grid-item'>item 4</div>
  <div class='grid-item'>item 5</div>
  <div class='grid-item'>item 6</div>
</div>

答案 1 :(得分:0)

使用Flex肯定会更好。 Flex更具灵活性。格里斯通常是固定布局。

.flex-grid {
  display: flex;
}
.flex-grid .col {
  flex: 1;
}

.flex-grid { 
  margin: 0 0 20px 0;
}
.col {
  background-color: #135;
  color: white;
  font-family:Verdana, Geneva, sans-serif;
  font-size: 150%;
  margin: 0px 5px 5px 5px;
  border-radius: 5px;
  padding: 20px;
}
   
 <div class="flex-grid">
  <div class="col">Column A</div>
  <div class="col">Column B</div>
  <div class="col">Column C</div>
  <div class="col">Column D</div>
</div>

<div class="flex-grid">
  <div class="col">Column E</div>
  <div class="col">Column F</div>
  <div class="col">Column G</div>
</div>

<div class="flex-grid">
  <div class="col">Column H</div>
  <div class="col">Column I</div>
</div>

<div class="flex-grid">
  <div class="col">Column J</div>
</div>

希望这会有所帮助!现在,您只需要对某些屏幕尺寸进行@Media查询即可。