title: How to write xs, sm, md, lg for material ui grid item which contains xs={12} full width of the layout?
body: <p>My objective is to write the same full width in <code>xs, sm, md, lg</code> for the Card display. Can anyone help me in this query?</p>
  <p>This is my code:</p>
  <pre class="lang-js prettyprint-override"><code>import {
    Grid,
    Card,
    CardHeader,
    Avatar,
    IconButton,
    CardContent,
    Typography
  } from &quot;@material-ui/core&quot;;
  
  import React from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import MoreVertIcon from &quot;@material-ui/icons/MoreVert&quot;;
  
  class App extends React.Component {
    render() {
      return (
        &lt;Grid container spacing={1}&gt;
          &lt;Grid item xs={12}&gt;
            &lt;Card&gt;
              &lt;CardHeader
                avatar={&lt;Avatar aria-label=&quot;recipe&quot;&gt;R&lt;/Avatar&gt;}
                action={
                  &lt;IconButton aria-label=&quot;settings&quot;&gt;
                    &lt;MoreVertIcon /&gt;
                  &lt;/IconButton&gt;
                }
                title=&quot;Shrimp and Chorizo Paella&quot;
                subheader=&quot;September 14, 2016&quot;
              /&gt;
              &lt;CardContent&gt;
                &lt;Typography variant=&quot;body2&quot; color=&quot;textSecondary&quot; component=&quot;p&quot;&gt;
                  This impressive paella is a perfect party dish and a fun meal to
                  cook together with your guests. Add 1 cup of frozen peas along
                  with the mussels, if you like.
                &lt;/Typography&gt;
              &lt;/CardContent&gt;
            &lt;/Card&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      );
    }
  }
  export default App;
  </code></pre>
  <p><a href="https://codesandbox.io/s/pensive-resonance-913y5" rel="nofollow noreferrer">Here is the Code Sandbox sample</a></p>